【Vue】什么时候用组件的.sync修饰符，什么时候用自定义组件的v-model，两者有什么区别？

先看.sync 的官方定义

【Vue】什么时候用组件的.sync修饰符，什么时候用自定义组件的v-model，两者有什么区别？

再来看v-model

【Vue】什么时候用组件的.sync修饰符，什么时候用自定义组件的v-model，两者有什么区别？

两者要实现的目的都是一样，子组件和外部数据同步，双向绑定

回答

先上结论：两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定。v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一

这里引用官方的一段话：组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中
sync和v-model 都是通过prop把外部数据下发到组件，组件再通过event把内部发生变化的数据回传回去。

上代码，可以直接单文件执行

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="vue-sync">
    <h3>I'm sync</h3>
    <p>the input value is {{parentValue}}</p>
    <vue-sync :value.sync="value"></vue-sync>
    <[email protected]:value 可以简写为 @update-->
    <!--<vue-sync :value="parentValue" @update:value="val => parentValue = val"></vue-sync>-->
</div>
<div id="vue-v-model">
    <h3>I'm v-model</h3>
    <p>the input value is {{value}}</p>
    <vue-model :value="value" @change="value = arguments[0]"></vue-model>
</div>
</body>
</html>
<script>
    Vue.component('vue-sync', {
        template: '<input :value="input_value" @change="input">',
        props: ['input_value'],
        methods: {
            input: function () {
                this.$emit('update:value', this.$el.value)
            }
        }
    });
    Vue.component('vue-model',{
       template:'<input :value="input_value" @input="updateValue($event.target.value)">',
        props:['input_value'],
        methods:{
           updateValue:function (val) {
               this.$emit('change',val);
           }
        }
    });
    new Vue({
        el: "#vue-sync",
        data: {
            parentValue: 1
        }
    });
    new Vue({
        el:"#vue-v-model",
        data:{
            value:1
        }
    })
</script>

v-model只能有一个。
个人理解，别的就是语义的区别了，prop.sync表示这个子组件会修改父组件的值，v-model表示这是个表单类型的组件。

  • v-model
    v-model 绑定的是 value , 语义上是指绑定组件的值， 如 el-input 的 v-model 就是指输入的值，

  • .sync
    .sync 只是一个双向绑定的语法糖，是指允许子组件内部修改父组件的状态。 如<el-dialog :visible.sync='dialogVisible'></el-dialog> 就只是说，组件el-dialog 的visible 状态可以被组件内部改变。

两者共同点是都是双向绑定元素，不同点是 v-model 双向绑定的是value, .sync 可以双向绑定任何属性（prop）

综上，其实就是说，

如果一个组件需要双向绑定的属性，

它有值么？ 有就用 v-model， 如el-input 的值可能是用户输入的字符串， el-form 的值可能是 a=b&c=d, 也有可能是 { a:'b', c:'d' }

如果没有值，如一个对话框el-dialog 只有显隐状态(visible.sync)，没有值（当然，如果你认为它有值，那也可以用v-model）。

v-model一般是表单组件，绑定的是value属性，这个值的双向绑定也不是父组件和子组件的关系，而是view和model的对应关系，因为表单组件的值的变化来自于用户输入
而sync是指父子组件之间的通信

以上是 【Vue】什么时候用组件的.sync修饰符，什么时候用自定义组件的v-model，两者有什么区别？ 的全部内容， 来源链接： utcz.com/a/74795.html

回到顶部