博客

语法：子传父，使用updata进行值得双向绑定

vue的$emit(“updata:props属性名”，子传父传参）双向绑定

父组件通过属性绑定进行双向绑定

原理：父组件通过ref调用子组件得方法，子组件可以通过上面的方法实现动态得数据绑定，也就是子组件和父组件都可以拿到这个值，此时父组件为更新后的值，子组件为更新后的值

父组件：

<template>
      <my-form
        ref="myForm"
        //属性是子组件获取得props得值
        :baseForm="baseForm">
      </my-form>
</template>
js
data(){
    return{
        baseForm：{}
    }
}
methods（）{
    //父组件调用方法
    this.$refs.myForm.updateForm();
}

子组件

js
data(){return {}}
props:{
    baseForm: {
      type: Object,
      default: () => {},
    },
}
watch: {
//监听父组件的值
    baseForm: {
      handler(val) {
        if (val) {
            //值只要更改了就调用这个方法
          this.updateForm();
        }
      },
      deep: true,
    },
  },
methods:{
    // 动态更新数据
    updateForm() {
       //将this.baseForm值双向绑定给父组件得baseForm属性
      this.$emit('update:baseForm', this.baseForm);
    },
}

至此，就可以执行父子组建的双向数据绑定展示