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,
    },