问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
runingfalse
    75920

    先看.sync 的官方定义

    clipboard.png

    再来看v-model

    clipboard.png

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

    javascriptvue.js
    阅读 7.9k
    4 个回答
    得票最新
    头像
    runingfalse
      75920

      先上结论：两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定。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>
      头像
      toBeTheLight
        16.6k41634

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

        头像
        微雨微语
          1.6k31119
          • 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）。

          头像
          厦冰
            8.5k52638

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

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            被 1 篇内容引用
            推荐问题
            宣传栏