vue 非父子组件传递参数
参考学习:https://www.jianshu.com/p/870836d55262
https://www.cnblogs.com/zhangjunkang/p/10156999.html
创建一个事件中心,相当于中转站,(使用一个空的 Vue 实例作为中央事件总线)可以用它来传递事件和接收事件,在一个组件内调用on进行事件绑定。
请直接看代码,在初始化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)
} )