Vue.sync修飾符與$emit(update:xxx)詳解

更新時(shí)間：2022年11月11日 10:28:29 作者：我是ed.

這篇文章主要介紹了Vue.sync修飾符與$emit(update:xxx),實(shí)現(xiàn)思路非常簡(jiǎn)單，文章介紹了.sync修飾符的作用和使用.sync修飾符的寫法，實(shí)現(xiàn)代碼簡(jiǎn)單易懂對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Vue .sync修飾符與$emit(update:xxx)

.sync修飾符的作用

在對(duì)一個(gè) prop 進(jìn)行“雙向綁定,單向修改”的場(chǎng)景下，因?yàn)樽咏M件不能直接修改父組件，sync在2.3版本引入，作為一個(gè)事件綁定語(yǔ)法糖，利用EventBus，當(dāng)子組件觸發(fā)事件時(shí)，父組件會(huì)響應(yīng)事件并實(shí)現(xiàn)數(shù)據(jù)更新，避免了子組件直接修改父組件傳過(guò)來(lái)的內(nèi)容。

.sync修飾符之前的寫法

父組件：

<parent :myMessage=“bar” @update:myMessage=“func”>

js定義函數(shù):

func（val）{
	this.bar = val;
}

子組件，事件觸發(fā)函數(shù)：

func2(){
	this.$emit(‘update:myMessage',valc);
}

也就是說(shuō)，父組件需要傳一個(gè)綁定值（myMessage）同時(shí)需要設(shè)置一個(gè)更新觸發(fā)函數(shù)（func）給子組件修改綁定值的時(shí)候調(diào)用。

使用.sync修飾符的寫法

會(huì)簡(jiǎn)化上面的寫法，父組件不需要定義更新觸發(fā)函數(shù)。

父組件：

<comp :myMessage.sync="bar"></comp>

子組件：

this.$emit('update:myMessage',valc);

sync 修飾符與 $emit(update:xxx) ，駝峰法和 - 寫法的區(qū)別，使用.sync修飾符，即變量應(yīng)該使用駝峰法：

    // this.$emit('update:father-num',100);  //無(wú)效
    this.$emit('update:fatherNum',100); //有效
    //......
    <father v-bind:father-num.sync="test"></father>

不適用 .sync 修飾符，變量應(yīng)該使用 - ，即father-num

this.$emit('update:father-num',100);  //有效
//this.$emit('update:fatherNum',100); // 無(wú)效
//......
<father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>

但從實(shí)踐中發(fā)現(xiàn)，用 .sync 修飾符，這兩種寫法都是有效的。

在vue之中，當(dāng)父組件向子組件傳遞屬性的時(shí)候，如下使用駝峰法

<cpn :cMives="movies"></cpn>

在子組件中props:[‘cMives’],是接收不到屬性的，應(yīng)該使用-來(lái)綁定屬性，接收依舊使用駝峰法。

 <cpn :c-mives="movies"></cpn>

綜上，綁定時(shí)候用 “-”，接收和使用的時(shí)候用駝峰法，如果真的無(wú)效，再試試上面所說(shuō)的那種情況。

到此這篇關(guān)于Vue.sync修飾符與$emit(update:xxx)的文章就介紹到這了,更多相關(guān)Vue.sync修飾符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue Cli 3項(xiàng)目使用融云IM實(shí)現(xiàn)聊天功能的方法
這篇文章主要介紹了Vue Cli 3項(xiàng)目使用融云IM實(shí)現(xiàn)聊天功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
使用vue寫一個(gè)翻頁(yè)的時(shí)間插件實(shí)例代碼
最近在做自己項(xiàng)目中遇到一個(gè)非常簡(jiǎn)單的功能,跟大家分享下,這篇文章主要給大家介紹了關(guān)于使用vue寫一個(gè)翻頁(yè)的時(shí)間插件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟
upload上傳是前端開發(fā)很常用的一個(gè)功能,在Vue開發(fā)中常用的Element組件庫(kù)也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟,需要的朋友可以參考下
2023-12-12
vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用
當(dāng)子組件使用setup后,父組件就不能像vue2那樣直接就可以訪問(wèn)子組件內(nèi)的屬性和方法,這個(gè)時(shí)候就需要在子組件內(nèi)使用defineExpose宏函數(shù)來(lái)指定想要暴露出去的屬性和方法,本文介紹vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用,需要的朋友可以參考下
2024-05-05
淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive (下)
這篇文章主要介紹了淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(下),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
vue如何動(dòng)態(tài)生成andv圖標(biāo)
這篇文章主要介紹了vue如何動(dòng)態(tài)生成andv圖標(biāo)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解vue.js2.0父組件點(diǎn)擊觸發(fā)子組件方法
本篇文章主要介紹了詳解vue.js2.0父組件點(diǎn)擊觸發(fā)子組件方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
淺談vue-lazyload實(shí)現(xiàn)的詳細(xì)過(guò)程
本篇文章主要介紹了淺談vue-lazyload實(shí)現(xiàn)的詳細(xì)過(guò)程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Vue實(shí)現(xiàn)簡(jiǎn)單的拖拽效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08