vue兄弟通信全局事件总线,简述vue中的$emit搭配$on的组件传值

说明:vue中的组件传值方式有很多,$emit和$on只是其中一种

写法:

第一步:声明

先在main.js中声明$bus的指向,为什么叫bus呢?因为程序员都这样写,约定速成,可以理解成公交车(传值的过程很像上车和下车)

第二步:先在接收数据的页面先绑定(如图右)

在需要接收兄弟元素值的代码中写如下代码(on可以理解接收,getUsers是方法名称)

this.$bus.$on('getUsers',(users)=>{console.log('我是List组件,收到数据:',users); })

第三步:接着在发送数据的页面(如图左)

先通过请求方式获取到数据,再使用语法

this.$bus.$emit('getUsers',response.data.items)

同理,getUsers是方法名,后面的参数是右侧页面需要的值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值