快捷導(dǎo)航

vue中v-model指令與.sync修飾符的區(qū)別詳解

更新時間：2021年08月20日 16:29:09 作者：睡不著先生

本文主要介紹了vue中v-model指令與.sync修飾符的區(qū)別詳解，詳細的介紹了兩個的用法和區(qū)別，感興趣的可以了解一下

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'
     }
 }

所以相應(yīng)的父組件使用v-model的時候的等效操作為：

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

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

.sync

   <!-- 父組件 -->
    <template>
        <!-- .sync添加于v2.4，他能用于修改傳遞到子組件中的屬性 -->
        <Child :xxx.sync="model"></Child>
        <!-- 等效于下面的代碼 -->
        <Child :xxx = "model" @update:xxx = "model = $event"></Child>
    </template>
    <!-- 子組件 -->
    <input :value="xxx" @input = "$emit('update:xxx', $event.target.value)"/>

這里綁定的屬性名稱xxx可以更改，相應(yīng)的屬性名也會變化：

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

.sync的原理用到了子組件向父組件派發(fā)事件的$emit方法。其應(yīng)用場景為子組件想修改父組件傳遞的屬性；

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

兩者本質(zhì)都是一樣，并沒有任何區(qū)別： “監(jiān)聽一個觸發(fā)事件”="(val) => value = val"。

細微之處的區(qū)別

1.只不過v-model默認對應(yīng)的是input或者textarea等組件的input事件，如果在子組件替換這個input事件，其本質(zhì)和.sync修飾符一模一樣。比較單一，不能有多個。

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

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

總結(jié)功能作用場景：

1.v-model針對更多的是最終操作結(jié)果，是雙向綁定的結(jié)果，是value，是一種change操作。
比如：輸入框的值、多選框的value值列表、樹結(jié)構(gòu)最終綁定的id值列表（ant design和element都是）、等等...
2..sync針對更多的是各種各樣的狀態(tài)，是狀態(tài)的互相傳遞，是status，是一種update操作。
比如：組件loading狀態(tài)、子菜單和樹結(jié)構(gòu)展開列表（狀態(tài)的一種）、某個表單組件內(nèi)部驗證狀態(tài)、等等....