快捷導(dǎo)航

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

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

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

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

.sync修飾符的作用

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

.sync修飾符之前的寫法

父組件：

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

js定義函數(shù):

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

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

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

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

使用.sync修飾符的寫法

會簡化上面的寫法，父組件不需要定義更新觸發(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);  //無效
    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); // 無效
//......
<father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>

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

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