vue2如何进行逆向传值

父组件将值传递给子组件,叫做正向传值,子组件将值传递给父组件,叫做逆向传值;需要借助 自定义事件 2、vue.js 中允许正向传值,所以正向传值不需要条件触发,是主动的;逆向传值,是不允许的,需要主动(手动)触发

1.在父组件中,需要在data中设置一个空值用来接收子组件穿过来的值,如设置一个want:' ',

2.在子组件中设置一个button按钮,用来主动出发事件监听

 <button @click="give()">父亲的礼物</button>

使用自定义事件

 give ()

  {
     // 自定义事件
     // this.$emit('事件名',传递的值)

     this.$emit( 'change', this.gift1 )
  }

此处的change是自定义的,放到父组件中接收

自定义事件传递的值,会作为getVal的参数来传递

3.可以添加watch数据监听来进行实时修改

 watch: {
           gift1: {
             handler ()
               {
                  this.give()
                }
               }
        },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值