vue2中的.sync修飾符用法詳解
vue2的.sync修飾符用法
vue2 中實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方式有兩種，一個(gè)是v-model，一個(gè)是.sync修飾符。它們的區(qū)別是一個(gè)標(biāo)簽或者組件上，v-model只能使用一次，而.sync修飾符可以使用多次。
在Vue中，子父組件最常用的通信方式就是通過(guò)props進(jìn)行數(shù)據(jù)傳遞，props值只能在父組件中更新并傳遞給子組件，在子組件內(nèi)部，是不允許改變傳遞進(jìn)來(lái)的props值，這樣做是為了保證數(shù)據(jù)單向流通。但有時(shí)候，我們會(huì)遇到一些場(chǎng)景，需要在子組件內(nèi)部改變props屬性值并更新到父組件中，這時(shí)就需要用到.sync修飾符。
看案例吧
- Father.vue
<template>
<div class="hello" style="background-color: azure;">
--------------Farther-------------<br>
{{ msg }}
<button @click="handleMsg">changeMsg</button>
<Child :msg="msg" />
</div>
</template>
<script>
import Child from '../views/Child.vue';
export default {
name: 'Father',
components: {
Child
},
data() {
return {
msg: 'unchanged msg',
}
},
methods: {
handleMsg() {
this.msg = "The news of the father's change"
}
}
}
</script>- Child.vue
<template>
<div class="hello">
--------------Child----------------<br/>
{{ msg }}
<button @click="handleMsg">changeMsg</button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
msg: String,
},
methods: {
handleMsg() {
// eslint-disable-next-line vue/no-mutating-props
this.msg = "The news of the child's change"
}
}
}
</script>
點(diǎn)擊子組件的 changeMsg，消息變更，但是控制臺(tái)報(bào)錯(cuò)
另一個(gè)環(huán)境下，也報(bào)錯(cuò)但是只有子組件消息變更
使用 .sync 時(shí)
- Father.vue
<Child :msg.sync="msg" />
- Child.vue
handleMsg() {
this.$emit('update:msg', "The news of the child's change");
}點(diǎn)擊后，消息變更，并且控制臺(tái)沒(méi)有報(bào)錯(cuò)。
.sync 修飾符實(shí)現(xiàn)原理
.sync 修飾符也是一種語(yǔ)法糖，用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定，但它的實(shí)現(xiàn)方式與 v-model 有所不同。
- 當(dāng)使用 :msg.sync="msg" 時(shí)，等價(jià)于 :msg="msg" @update:msg="msg = $event"
- 父組件使用 :msg.sync 將屬性傳遞給子組件，并監(jiān)聽(tīng) update:msg 事件。子組件使用 $emit('update:msg', newValue) 來(lái)更新父組件的屬性。
因?yàn)槭窃诟附M件更新值，所以就不是在子組件更新 prop 值了。
- Father.vue
<Child :msg="msg" @update:msg="childMsg"/>
childMsg() {
this.msg = "The news of the child's change"
}- Child.vue
<button @click="handleMsg">changeMsg</button>
handleMsg() {
this.$emit('update:msg', "The news of the child's change");
}v-model 實(shí)現(xiàn)原理
v-model 是一種語(yǔ)法糖
當(dāng)使用 v-model="msg" 時(shí)，等價(jià)于 :msg="msg" @input='msg=$event'
父組件使用 :msg="msg" 將屬性傳遞給子組件，并監(jiān)聽(tīng) input 事件。子組件使用 props 的 value 屬性接收值，并使用 $emit('input ', newValue) 來(lái)更新父組件的屬性。
- Father.vue
<template>
<div class="hello" style="background-color: azure;">
--------------Farther-------------<br>
{{ msg }}
<button @click="handleMsg">changeMsg</button>
<Child v-model="msg"/>
</div>
</template>
<script>
import Child from '../views/Child.vue';
export default {
name: 'Father',
components: {
Child
},
data() {
return {
msg: 'unchanged msg',
}
},
methods: {
handleMsg() {
this.msg = "The news of the father's change"
}
}
}
</script>- Child.vue
<template>
<div class="hello">
--------------Child----------------<br/>
{{ value }}
<button @click="handleMsg">changeMsg</button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
value: String,
},
methods: {
handleMsg() {
this.$emit('input', "The news of the child's change");
}
}
}
</script>- 等同于
<Child :value="msg" @input="msg=$event"/>
在Vue2中，一個(gè)組件只能有一個(gè)v-model。 .sync 支持多個(gè)props的雙向綁定
Vue3中，v-model支持參數(shù)化綁定，替代.sync的功能，例如：
<child v-model:name="userName" v-model:age="userAge" />
Vue 3中不再推薦使用.sync，轉(zhuǎn)而用帶參數(shù)的v-model。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue-cli webpack 引入swiper的操作方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue分頁(yè)插件的前后端配置與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了ElementUI表格錯(cuò)位修復(fù)心得,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-03-03
vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng)的示例代碼
這篇文章主要給大家介紹了如何通過(guò)vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng),文章通過(guò)代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以參考閱讀本文2023-08-08
Vue實(shí)現(xiàn)購(gòu)物車(chē)場(chǎng)景下的應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購(gòu)物車(chē)場(chǎng)景下的應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue.js提交按鈕時(shí)進(jìn)行簡(jiǎn)單的if判斷表達(dá)式詳解
這篇文章主要給大家介紹了關(guān)于vue.js提交按鈕時(shí)如何進(jìn)行簡(jiǎn)單的if判斷表達(dá)式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
文章介紹了WebSocket協(xié)議的基礎(chǔ)概念、特點(diǎn)及與HTTP的區(qū)別,詳解了在Vue中的集成方式（組件內(nèi)/插件封裝/Vuex管理）,并涵蓋連接管理、安全性、數(shù)據(jù)格式等最佳實(shí)踐,列舉了Socket.IO和SockJS等常用庫(kù),適用于實(shí)時(shí)通信場(chǎng)景,感興趣的朋友一起看看吧2025-08-08
vue3中新增了setup,它的出現(xiàn)是為了解決組件內(nèi)容龐大后,理解和維護(hù)組件變得困難的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue3使用setup如何定義組件的name屬性的相關(guān)資料,需要的朋友可以參考下2022-06-06
本文介紹了Vue組件中props的三種聲明方式：數(shù)組寫(xiě)法、對(duì)象寫(xiě)法和TypeScript類(lèi)型聲明寫(xiě)法,數(shù)組寫(xiě)法適用于快速原型開(kāi)發(fā),但缺乏類(lèi)型校驗(yàn)；對(duì)象寫(xiě)法提供了基本類(lèi)型校驗(yàn)和默認(rèn)值設(shè)置；TypeScript類(lèi)型聲明寫(xiě)法結(jié)合了Vue的運(yùn)行時(shí)校驗(yàn)和TypeScript的靜態(tài)類(lèi)型檢查2025-10-10
如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能
在Vue3項(xiàng)目中集成Video.js庫(kù),可以創(chuàng)建強(qiáng)大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09