快捷導(dǎo)航

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修飾符的寫(xiě)法，實(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修飾符之前的寫(xiě)法

父組件：

<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修飾符的寫(xiě)法

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

父組件：

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

子組件：

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

sync 修飾符與 $emit(update:xxx) ，駝峰法和 - 寫(xiě)法的區(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 修飾符，這兩種寫(xiě)法都是有效的。

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