vue父子組件傳值雙向綁定

vue+vuetify管理系統

對表格進行封裝時需要已選項selected雙向綁定，父子組件互通，表格為子組件，頁面為父組件

來的做法：

1）table子組件監聽selected

 

2）父組件監聽接收selected

     

3）父組件selected改變后還需傳給子組件table

 

4）子組件table接收父組件傳過來的selected

 

props接收的參數名和自定義變量名selected會沖突。

把本地變量注釋掉，會報錯，不讓修改props傳過來的值。

5）改變接收參數名為newselected

    

6）監聽newselected，接收到父組件改變之后的selected后賦值給selected

 

用sync修飾符

1）table子組件監聽selected

    selected: {
      handler(val) {
        this.$emit('update:parentselected', val);
      },
      deep: true,
    },

2）父組件用:parentselected.sync="selected"傳遞selected給子組件並接收子組件更新過的selected

<Table
   :parentselected.sync="selected"/>

因為sync其實是一個語法糖,這段代碼會被擴展為

<Table
  :parentselected="selected"
  @update:parentselected="val=>parentselected=val"
/>

3）props接收

parentselected: {
      type: Array,
      default() {
        return [];
      },
    },

4）監聽parentselected，監聽到改變后賦值給子組件的selected

parentselected: {
      handler(val) {
        this.selected = val;
      },
      deep: true,
    },