快捷導(dǎo)航

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

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

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

v-model

    <!--父組件-->
    <template>
        <!--v-model 指令是語法糖-->
        <Child v-model="model"></Child>
        <!-- 把 v-model 指令展開后相當(dāng)于下面的代碼 -->
        <!-- v-model綁定的默認(rèn)事件是input,默認(rèn)prop是value屬性 -->
        <Child :value="model" @input="model = $event"></Child>
    </template>

你也可以通過子組件中的model選項(xiàng)來修改v-model綁定的的默認(rèn)事件和prop自定義屬性：

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

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

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

v-model通常用于表單控件，因?yàn)檫@樣子組件有更強(qiáng)的控制能力

.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)的屬性名也會(huì)變化：

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

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

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

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

細(xì)微之處的區(qū)別

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

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

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

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

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

但是也有例外，就是v-model也可以替代部分.sync的情況，這是針對(duì)于這個(gè)組件只有一個(gè)功能就是切換狀態(tài)的時(shí)候，這個(gè)狀態(tài)就是最終操作值，這時(shí)候可以替代.sync修飾符。使用兩種不同的方式雙向綁定，能夠讓我們快速理解組件的結(jié)構(gòu)。

您可能感興趣的文章: