vue 非父子组件传递参数

本文介绍如何在Vue项目中创建和使用事件总线,实现组件间通信。通过一个空的Vue实例作为中央事件总线,组件可以触发和监听事件,有效解决跨组件通信难题。

参考学习:https://www.jianshu.com/p/870836d55262
https://www.cnblogs.com/zhangjunkang/p/10156999.html
创建一个事件中心,相当于中转站,(使用一个空的 Vue 实例作为中央事件总线)可以用它来传递事件和接收事件,在一个组件内调用 e m i t 事 件 触 发 , 另 一 个 组 件 内 调 用 emit事件触发,另一个组件内调用 emiton进行事件绑定。

请直接看代码,在初始化web app的时候,给data添加一个 名字为eventhub 的空vue对象

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  data: {
    eventHub: new Vue()
  }
})

某一个组件内调用事件触发

/通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)

另一个组件内调用事件接受,当然在组件销毁时接触绑定,使用$off方法

this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData)=>{
    handle(yourData)
} )
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值