vue子組件屬性雙向綁定

我們要對子組件屬性prop進行“雙向綁定”，一般是在子組件中通過$emit(event, [...參數])觸發一個自定義的事件，這樣，父組件可以在使用子組件的地方直接用 v-on來監聽子組件觸發的事件, 並且可以在監聽函數中依次取得所有從子組件傳來的參數，如下

this.emit('eventYouDefined', arg); // 子組件觸發自定義事件

// 父組件監聽自定義事件
<Son  v-on: eventYouDefined = "functionYours" />

.sync修飾符是在vue2.3.1+版本開始使用，只要在父組件里對要雙向綁定的屬性使用.sync修飾符就可以了，不用再定義什么自定義事件。

 

此外，在學習vue自定義事件的.sync修飾符實現改變數值時發現一個問題如下

由於props的大小寫命名:fatherNum,對應不同的$emit()會有不同的效果，具體如下：

使用.sync修飾符,即

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

與不使用.sync，即

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>