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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值