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>

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