什么时候用组件的.sync修饰符,什么时候用自定义组件的v-model,两者有什么区别?

先看.sync 的官方定义

clipboard.png

再来看v-model

clipboard.png

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

回答:

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

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

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

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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>

    <!--@update: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-inputv-model 就是指输入的值,
  • .sync
    .sync 只是一个双向绑定的语法糖,是指允许子组件内部修改父组件的状态。 如<el-dialog :visible.sync='dialogVisible'></el-dialog> 就只是说,组件el-dialogvisible 状态可以被组件内部改变。

两者共同点是都是双向绑定元素,不同点是 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是指父子组件之间的通信

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注