详解VUE自定义组件中用.sync修饰符与v-model的区别
程序员文章站
2022-07-03 21:51:28
.sync修饰组件
<...
.sync修饰组件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-03</title>
<!-- 引入vue -->
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div class="container" style="margin-top: 12px;">
<div id="demo" class="row">
{{ say }}
<br />
<my-input :value.sync="say"></my-input>
</div>
</div>
<script>
new vue({
el: '#demo',
data: {
say: "123"
},
components: {
"my-input": {
props: ['value'],
template: "<div><input v-bind:value='value' v-on:input='change1' />{{value}}</div>",
watch: {
value: function(newvalue, oldvalue) {
alert('子组件value新旧值' + newvalue + '/' + oldvalue);
//this.$emit('update:value', newvalue)
}
},
methods: {
change1: function(e) {
var v = e.target.value
this.$emit('update:value', v)
},
}
}
},
watch: {
say: function(n, o) {
alert('父组件新旧值' + n + '-' + o)
}
},
methods: {
}
})
</script>
</body>
v-model修饰组件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-10</title>
<!-- 引入vue -->
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div class="container" style="margin-top: 12px;">
<div id="demo" class="row">
{{ say }}
<br />
<my-input v-model="say"></my-input>
</div>
</div>
<script>
new vue({
el: '#demo',
data: {
say: "123"
},
components: {
"my-input": {
props: ['value'],
template: "<div><input v-bind:value='value' v-on:input='change' />{{value}}</div>",
watch: {
value: function(newvalue, oldvalue) {
alert('子组件value新旧值' + newvalue + '/' + oldvalue);
//this.$emit('update:value', newvalue)
}
},
methods: {
change: function(e) {
this.$emit('input', e.target.value)
}
}
}
}
})
</script>
</body>
区别只能自己慢慢体会,个人感觉 .sync用法灵活,而v-model只能接受prop名为为value的值.
两者都需要手动触发$emit方法.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 【知识】故事说“MQTT协议”
下一篇： vue如何引入sass全局变量