vue父子组件双向绑定

导航：

双向绑定方式：

1. v-mode绑定

2. sync绑定

 

v-mode双向绑定

第一步： 父组件加上v-model

<ClassForm v-model="ttt" @afterCommit ="handleGetOrgTree" ref="classFormObj"/>

第二步： 子组件接收

export default {
  props: {
    value: { type: String, default: "默认字符串" }
  },
  computed: {
   // 在子组件操作val 就可以对父组件绑定的v-model进行修改
    val: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  }
}

 

 

sync 绑定

第一步父组件添加sync：

      <ClassForm  :aaa.sync="ccc" @afterCommit ="handleGetOrgTree"  ref="classFormObj"/>

第二步子组件修改：

export default {
  props: {
    aaa: {
      type: String,
      default: "aaa"
    }
  },
  computed: {
    // val进行修改就可以改变外部的aaa,这样就进行了双向绑定
    val: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("update:aaa", val);
      }
    }
  }
}