目錄

• v-model
  
• .sync
  
• 細微之處的區別
  
• 總結功能作用場景：
  

v-model

    <!--父元件-->
    <template>
        <!--v-model 指令是語法糖-->
        <Child v-model="model"></Child>
        <!-- 把 v-model 指令展開後相當於下面的程式碼 -->
        <!-- v-model繫結的預設事件是input,預設prop是value屬性 -->
        <Child :value="model" @input="model = $event"></Child>
    </template>

你也可以通過子元件中的model選項來修改v-model繫結的的預設事件和prop自定義屬性：

 //子元件
 export default {
  model: {
         prop: 'checked',event: 'change'
     }
 }

所以相應的父元件使用v-model的時候的等效操作為：

    <template>
        <Child :checked="model"  @change="model = $event"></Child>
    <template>

v-model通常用於表單控制元件，因為這樣子元件有更強的控制能力

.sync

   <!-- 父元件 -->
    <template>
        <!-- .sync添加於v2.4，他能用於修改傳遞到子元件中的屬性 -->
        <Child :xxx.sync="model">&lxGbaQFt;/Child>
        <!-- 等效於下面的程式碼 -->
        <Child :xxx = "model" @update:xxx = "model = $event"></Child>
    </templatwww.cppcns.com
 
e>
    <!-- 子元件 -->
    <input :value="xxx" @input = "$emit('update:xxx',$event.target.value)"/>

這裡繫結的屬性名稱xxx可以更改，相應的屬性名也會變化：

    <!-- 父元件 -->
    <template>
        <Child :foo.sync="model"></Child>
    </template>
    <!-- 子元件 -->
    <input :value = "foo" @input = "$emit('update:foo',$event.target.value)"/>

.sync的原理用到了子元件向父元件派發事件的$emit方法。其應用場景為子元件想修改父元件傳遞的屬性；

.sync修飾符的控制能力都在父元件，事件名稱也是相對固定的update:xxx

兩者本質都是一樣，並沒有任何區別： “監聽一個觸發事件”="(val) => value = val"。

細微之處的區別

1.只不過v-model預設對應的是input或者textarea等元件的input事件，如果在子元件替換這個input事件，其本質和.sync修飾符一模一樣。比較單一，不能有多個。

// 子元件可以用自定義事件，來替換v-model預設對應的原生input事件，只不過我們需要在子元件手動 $emit
model: {
        prop: "value",event: "update"
},

一個元件可以多個屬性用.sync修飾符，可以同時"雙向繫結多個“prop”，而並不像v-model那樣，一個元件只能有一個。

總結功能作用場景：

1.v-model針對更多的是最終操作結果，是雙向繫結的結果，是value，是一種change操作。
比如：輸入框的值、多選框的value值列表、樹結構最終繫結的id值列表（ant design和element都是）、等等...
2..sync針對更多的是各種各樣的狀態，是狀態的互相傳遞，是status，是一種update操作。
比如：元件loading狀態、子選單和樹結構展開列表（狀態的一種）、某個表單元件內部驗證狀態、等等....

但是也有例外，就是v-model也可以替代部分.sync的情況，這是針對於這個元件只有一個功能就是切換狀態的時候，這個狀態就是最終操作值，這時候可以替代.sync修飾xGbaQF符。使用兩種不同的方式雙向繫結，能夠讓我們快速理解元件的結構。