修飾符v-model與.sync有什麼不同？以下這篇文章跟大家聊聊v-model與.sync修飾符的差異，希望對大家有幫助！

在日常開發(fā)的過程中，v-model指令是常用到的，一般來說v-model指令在表單及元素上建立雙向資料綁定，但v-model本質(zhì)上是語法糖。提到語法糖這裡就不得不提到另一個與v-model有相似功能的雙向綁定語法糖了，那就是.sync修飾符。這裡對兩者進(jìn)行一下總結(jié):

一、v-model

#1. 作用

#相信過使用過vue框架的朋友對這個指令不會感到陌生，v-model是用來進(jìn)行<input>、<textarea> </textarea>、<select></select>元素上資料的雙向綁定的。 （學(xué)習(xí)影片分享：vue影片教學(xué)）

?例如：

<template>
    <div >
        <input v-model="value" type="text"/>    //這里的v-model里面的value可以直接獲取到用戶的輸入值
    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            value:"",    //這里定義的value變量可以直接將上面獲取到的值進(jìn)行操作
        };
      }, 
    }
</script>
<style  scoped>

</style>

當(dāng)我們在input框裡輸入了某個值的時候，下面data裡的value就可以直接後去到我們輸入的值，而不需要操作dom元素來取得。

1. 本質(zhì)

v-model本質(zhì)上來說是一個語法糖，我們習(xí)慣性的寫法是這樣的：

 <input v-model="value" type="text"/>

但是實際上完整的寫法是這樣的：

<input :value="value" @input="value=$event.target.value" type="text" />

透過對比語法糖和原始寫法可以得出： 再給<input/>元素加入v-model屬性時，預(yù)設(shè)會把value當(dāng)作元素的屬性，然後把input事件當(dāng)作即時傳遞value的觸發(fā)事件。

注意：不是所有能進(jìn)行雙向資料綁定的元素都是input事件！

3、特殊用法

#在一般情況下，我們使用v-model主要是用於資料的雙向綁定，可以十分方便的取得到使用者輸入的值，但在某些特殊情況下，我們也可以將v-model用於父子元件之間資料的雙向綁定。

<template>
    <div class="father">
        <Son v-model="str"/>
    </div>
</template>

<script>

import Son from &#39;@/components/Son.vue&#39;;    //引入子組件

export default {
    components: {Son},
    data() {
        return {
            str:"father"
        };
      },
    }
</script>

這裡定義了一個father元件和son元件，並且將son元件引入father元件中，給son元件綁定了v-model進(jìn)行了傳值。此時我們需要在son元件中接收並使用這個值：

<template>
    <div class="son">
        我是在son組件里接收到的值:{{value}}
    </div>
</template>
<script>
export default {
    components: {},
    props:{
        value:{
            type:String,
        },
      },
    }
</script>

注意：這裡接受的值必須是value，寫成其他名字將會報錯！

父元件向子元件傳值，子元件中是無法直接修修改資料的，直接修改的話就會報錯

當(dāng)我們需要修改這個值時，就需要再將其傳入到父元件中修改。

這就需要在父元件中的子元件上定義一個自訂事件，透過子元件$emit('自訂事件名稱','值')的方法將值傳入父組件。

但是在這裡我們不能使用自訂事件，因為我們用的是v-model傳值，所以我們只能使用input事件來修改。

子元件中使用$emit()方法.呼叫父元件中的事件,並且進(jìn)行傳值

<template>
    <div class="son">
        我是在son組件里接收到的值:{{value}}
        <button @click="handleClick">click</button>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            str:&#39;son&#39;
        };
    },
    props:{
        value:{
            type:String,
        },
    },
    methods: {
        handleClick(){
            this.$emit(&#39;input&#39;,this.str)
        }
    },
    }
</script>

這樣就完成父子元件之間的資料雙向綁定效果

二、.sync修飾符

#1、作用

##.sync修飾符可以實現(xiàn)父子元件之間的雙向綁定，並且可以實現(xiàn)子元件同步修改父組件的值，相比較與

v-model來說,sync修飾符就簡單很多了:

2、本質(zhì)

    //正常父傳子
    <Son :a="num" />
    
    //加上sync之后的父傳子
    <Son :a.sync="num" />
    
    //它等價于
    <Son :a="num" @update:a="val=>a=val" />
    
    //相當(dāng)于多了一個事件監(jiān)聽，事件名是update:a,
    //回調(diào)函數(shù)中，會把接收到的值賦值給屬性綁定的數(shù)據(jù)項中。

這裡面的傳值與接收和正常的父元件向子元件傳值沒有差別，唯一的差別在於子元件往回傳值的時候$emit所呼叫的事件名稱必須是

update:屬性名稱，事件名稱寫錯不會報錯，但那時也不會有任何改變，這點需要注意。

總結(jié)

v-model與.sync： 相同點：都是語法糖，都可以實作父子元件中的資料通訊。

不同點：格式不同，v-model="num" ? ? ? ? ?:num.sync="num"

v-model:@input value ?? ?? ? ? ? ? ?

##還有就是，

v-model

只能使用一次，.sync可以使用多個。 【相關(guān)影片教學(xué)推薦：

vuejs入門教學(xué)

、web前端入門】

以上是修飾符v-model與.sync有什麼不同？差異對比淺析的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！