vue的$emit(“updata:props属性名“,传参)双向绑定

语法:子传父,使用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);
    },
}

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

猜你喜欢

转载自blog.csdn.net/m0_64207574/article/details/128959073