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

.sync修飾符的作用

在對一個 prop 進行“雙向綁定,單向修改”的場景下，因為子組件不能直接修改父組件，sync在2.3版本引入，作為一個事件綁定語法糖，利用EventBus，當子組件觸發事件時，父組件會響應事件並實現數據更新，避免了子組件直接修改父組件傳過來的內容。

.sync修飾符之前的寫法

父組件：

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

js定義函數:

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

子組件，事件觸發函數：

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

也就是說，父組件需要傳一個綁定值（myMessage）同時需要設置一個更新觸發函數（func）給子組件修改綁定值的時候調用。

使用.sync修飾符的寫法

會簡化上面的寫法，父組件不需要定義更新觸發函數。

父組件：

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

子組件：

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

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

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

不適用 .sync 修飾符，變量應該使用 - ，即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>

但從實踐中發現，用 .sync 修飾符，這兩種寫法都是有效的。

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

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

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

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

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