vue 非父子组件传递参数

参考学习:https://www.jianshu.com/p/870836d55262
https://www.cnblogs.com/zhangjunkang/p/10156999.html
创建一个事件中心,相当于中转站,(使用一个空的 Vue 实例作为中央事件总线)可以用它来传递事件和接收事件,在一个组件内调用emitemit事件触发,另一个组件内调用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)
} )
posted @ 2019-05-09 15:45  princeness  阅读(205)  评论(0编辑  收藏  举报