修飾符v-model與.sync有什么區(qū)別？下面本篇文章給大家聊聊v-model與.sync修飾符的差異，希望對(duì)大家有所幫助！

在日常開(kāi)發(fā)的過(guò)程中，v-model指令是經(jīng)常用到的，一般來(lái)說(shuō)v-model指令在表單及元素上創(chuàng)建雙向數(shù)據(jù)綁定，但v-model本質(zhì)上是語(yǔ)法糖。提到語(yǔ)法糖這里就不得不提到另一個(gè)與v-model有相似功能的雙向綁定語(yǔ)法糖了，那就是.sync修飾符。在這里對(duì)兩者進(jìn)行一下總結(jié):

一、v-model

1. 作用

相信過(guò)使用過(guò)vue框架的朋友對(duì)這個(gè)指令不會(huì)感到陌生，v-model是用來(lái)進(jìn)行<input>、<textarea>、<select>元素上數(shù)據(jù)的雙向綁定的。（學(xué)習(xí)視頻分享：vue視頻教程）

例如：

<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)我們?cè)趇nput框里輸入了某個(gè)值的時(shí)候，下面data里的value就可以直接后去到我們輸入的值，而不需要操作dom元素進(jìn)行獲取。

1. 本質(zhì)

v-model本質(zhì)上來(lái)說(shuō)是一個(gè)語(yǔ)法糖，我們習(xí)慣性的寫法是這樣的：

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

但是實(shí)際上完整的寫法是這樣的：

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

通過(guò)對(duì)比語(yǔ)法糖和原始寫法可以得出： 再給<input/>元素添加v-model屬性時(shí)，默認(rèn)會(huì)把value作為元素的屬性，然后把input事件作為實(shí)時(shí)傳遞value的觸發(fā)事件。

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

3、特殊用法

一般情況下，我們使用v-model主要是用于數(shù)據(jù)的雙向綁定，可以十分方便的獲取到用戶輸入的值，但在某些特殊情況下，我們也可以將v-model用于父子組件之間數(shù)據(jù)的雙向綁定。

<template>     <div class="father">         <Son v-model="str"/>     </div> </template>  <script>  import Son from '@/components/Son.vue';    //引入子組件  export default {     components: {Son},     data() {         return {             str:"father"         };       },     } </script>

這里定義了一個(gè)father組件和son組件，并且將son組件引入到father組件中，給son組件綁定了v-model進(jìn)行了傳值。此時(shí)我們需要在son組件中接收并使用這個(gè)值：

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

注意：這里接受的值必須是value，寫成其他名字將會(huì)報(bào)錯(cuò)！

父組件向子組件傳值，子組件中是不能直接修修改數(shù)據(jù)的，直接修改的話就會(huì)報(bào)錯(cuò)

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

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

但是在這里我們不能使用自定義事件，因?yàn)槲覀冇玫氖莢-model傳值，所以我們只能使用input事件進(jìn)行修改。

子組件中使用$emit()方法.調(diào)用父組件中的事件,并且進(jìn)行傳值

<template>     <div class="son">         我是在son組件里接收到的值:{{value}}         <button @click="handleClick">click</button>     </div> </template>  <script> export default {     components: {},     data() {         return {             str:'son'         };     },     props:{         value:{             type:String,         },     },     methods: {         handleClick(){             this.$emit('input',this.str)         }     },     } </script>

這樣就完成父子組件之間的數(shù)據(jù)雙向綁定效果

二、.sync修飾符

1、作用

.sync修飾符可以實(shí)現(xiàn)父子組件之間的雙向綁定，并且可以實(shí)現(xiàn)子組件同步修改父組件的值，相比較與v-model來(lái)說(shuō),sync修飾符就簡(jiǎn)單很多了:

2、本質(zhì)

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

這里面的傳值與接收和正常的父組件向子組件傳值沒(méi)有區(qū)別，唯一的區(qū)別在于子組件往回傳值的時(shí)候$emit所調(diào)用的事件名必須是update:屬性名，事件名寫錯(cuò)不會(huì)報(bào)錯(cuò)，但那時(shí)也不會(huì)有任何改變，這點(diǎn)需要注意。

總結(jié)

v-model與.sync： 相同點(diǎn)：都是語(yǔ)法糖，都可以實(shí)現(xiàn)父子組件中的數(shù)據(jù)通信。

不同點(diǎn)：格式不同，v-model="num" :num.sync="num"

v-model:@input+value :num.sync:@update:num

還有就是，v-model只能使用一次，.sync可以使用多個(gè)。

【相關(guān)視頻教程推薦：vuejs入門教程、web前端入門】