什么時(shí)候用組件的.sync修飾符，什么時(shí)候用自定義組件的v-model，兩者有什么區(qū)別？

先看.sync 的官方定義

再來看v-model

兩者要實(shí)現(xiàn)的目的都是一樣，子組件和外部數(shù)據(jù)同步，雙向綁定

回答

編輯回答

陪她鬧

先上結(jié)論：兩者的本質(zhì)都是語法糖，目的都是實(shí)現(xiàn)組件與外部數(shù)據(jù)的雙向綁定。v-model 是 .sync的一種體現(xiàn)。.sync 比較靈活;v-model較單一

這里引用官方的一段話：組件實(shí)例的作用域是孤立的。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。父組件的數(shù)據(jù)需要通過 prop 才能下發(fā)到子組件中
sync和v-model 都是通過prop把外部數(shù)據(jù)下發(fā)到組件，組件再通過event把內(nèi)部發(fā)生變化的數(shù)據(jù)回傳回去。

上代碼，可以直接單文件執(zhí)行

<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 可以簡(jiǎn)寫為 @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>

2017年12月16日 20:52

編輯回答

病癮

v-model一般是表單組件，綁定的是value屬性，這個(gè)值的雙向綁定也不是父組件和子組件的關(guān)系，而是view和model的對(duì)應(yīng)關(guān)系，因?yàn)楸韱谓M件的值的變化來自于用戶輸入
而sync是指父子組件之間的通信

2018年4月7日 05:34

編輯回答

網(wǎng)妓

v-model只能有一個(gè)。
個(gè)人理解，別的就是語義的區(qū)別了，prop.sync表示這個(gè)子組件會(huì)修改父組件的值，v-model表示這是個(gè)表單類型的組件。

2017年3月7日 04:32

編輯回答

厭遇

v-model
v-model 綁定的是 value , 語義上是指綁定組件的值，如 el-input 的 v-model 就是指輸入的值，
.sync
.sync 只是一個(gè)雙向綁定的語法糖，是指允許子組件內(nèi)部修改父組件的狀態(tài)。如<el-dialog :visible.sync='dialogVisible'></el-dialog> 就只是說，組件el-dialog 的visible 狀態(tài)可以被組件內(nèi)部改變。