? ? ? ? 我們?cè)谌粘ｉ_發(fā)的過程中,v-model指令可謂是隨處可見,一般來說 v-model 指令在表單及元素上創(chuàng)建雙向數(shù)據(jù)綁定,但 v-model 本質(zhì)是語法糖。但提到語法糖,這里就不得不提另一個(gè)與v-model有相似功能的雙向綁定語法糖了,這就是 .sync修飾符。在這里就兩者的使用進(jìn)行一下比較和總結(jié):

一、v-model

????????v-model的本質(zhì)上來說,是一個(gè)語法糖

????????目前咱們習(xí)慣性的寫法是這樣的:

<input v-model="val" type="text">

????????但是實(shí)質(zhì)上的完整寫法是這樣的:

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

????????也可以將@input后面寫成一個(gè)函數(shù),然后在methods中進(jìn)行賦值操作。

????????要理解這行代碼，首先我們要知道 input 元素本身有個(gè)input 事件，這是 HTML5 新增加的，類似 onchange ，每當(dāng)輸入框內(nèi)容發(fā)生變化，就會(huì)觸發(fā) input 事件，把最新的value值傳給傳遞給val ,完成雙向數(shù)據(jù)綁定的效果 。

????????注意:??不是所有能進(jìn)行雙向綁定的元素都是input事件?？梢圆榭次业牧硪黄獑为?dú)介紹自定義組件的v-model的文章?

????????↓↓↓↓↓↓↓↓↓↓

自定義子組件的v-model-CSDN博客

二、.sync修飾符

????????1.作用：.sync修飾符可以實(shí)現(xiàn)子組件與父組件的雙向綁定，并且可以實(shí)現(xiàn)子組件同步修改父組件的值。

????????2.本質(zhì)：

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

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

三、例舉與總結(jié)

同樣實(shí)現(xiàn)父子組件雙向數(shù)據(jù)傳遞：

1.使用自定義v-model

? ? ? ? 父組件中

<template><div>父組件{{ sonData }}<Son v-model="sonData"/><el-input v-model="sonData" clearable maxlength="200" /></div>
</template><script>
import Son from './son'
export default {name: 'Father',components: {Son},data() {return {sonData: '2'}}
}
</script>

?子組件

<template><div>子組件{{ value }}<el-input v-model="val1ue" clearable maxlength="200" @change="change" /></div>
</template><script>
export default {name: 'Son',model: {prop: 'val1ue', // 父組件的v-model所綁定的值是這里的prop的屬性值對(duì)應(yīng)的props中的值event: 'change' // 定義通過$emit去調(diào)用的父組件的事件，在父組件的v-model改變時(shí)則會(huì)安裝這個(gè)方法去處理},props: {value: String // 接受父組件傳遞的v-model后面值的類型,必須在此注冊(cè)不然沒法使用},methods: {change() {this.$emit('change', this.val1ue)}}
}
</script>

?2.使用.sync

????????父組件中

<template><div>父組件{{ sonData }}<Son :value.sync="sonData" /> //通過.sync給value屬性綁定屬性值為sonData//在這里綁定一個(gè)v-model從而測試在父組件中改變時(shí)，是否傳遞到了子組件<el-input v-model="sonData" clearable maxlength="200" /></div>
</template><script>
import Son from './son'
export default {name: 'Father',components: {Son},data() {return {sonData: '2'}}
}
</script>

????????子組件中

<template><div>子組件{{ value }}<el-input v-model="value" clearable maxlength="200" @input="change" /></div>
</template>
<script>
export default {name: 'Son',props: {value: String //接收父組件傳遞的參數(shù)},methods: {change() {//這里需要注意一定得是 update:接收的參數(shù)名 this.$emit('update:value', this.value)}}
}
</script>

? ? ? ?總結(jié)：.sync與v-model都是語法糖，都可以實(shí)現(xiàn)父子組件的通信，但v-model只能用一次，.sync卻可以有多個(gè)