vue中v-model指令與.sync修飾符的區別是什么

本篇內容主要講解“vue中v-model指令與.sync修飾符的區別是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中v-model指令與.sync修飾符的區別是什么”吧!

目錄

• 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"></Child>
        <!-- 等效于下面的代碼 -->
        <Child :xxx = "model" @update:xxx = "model = $event"></Child>
    </template>
    <!-- 子組件 -->
    <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修飾符。使用兩種不同的方式雙向綁定，能夠讓我們快速理解組件的結構。

到此，相信大家對“vue中v-model指令與.sync修飾符的區別是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！