vue2如何进行逆向传值

最新推荐文章于 2024-05-09 04:28:12 发布

韩沛晓

最新推荐文章于 2024-05-09 04:28:12 发布

阅读量553

点赞数 1

文章标签： 1024程序员节前端 js 开发语言

本文链接：https://blog.csdn.net/hhhxyyyzz/article/details/134015550

版权

父组件将值传递给子组件，叫做正向传值，子组件将值传递给父组件，叫做逆向传值；需要借助自定义事件 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()
                }
               }
        },

关注