移動(dòng)端前端開發(fā)需要學(xué)什么成都網(wǎng)站排名 生客seo
? ? ? ? 我們?cè)谌粘i_發(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>