vue事件发射与接收(可实现页面传值和非父子组件传值)

vue2.0中可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件。

1).给data添加一个 名字为eventhub 的空vue对象,就可以在任何组件都可以调用事件发射接收的方法了，在main.js中添加：

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

2).在home组件内调用事件接受参数（$on监听）

mounted(){
    this.$root.eventHub.$on('事件名称', (data)=>{
      console.log('接受到的参数：'+data)
    } )
  },

3）在adress组件内调用事件触发 ($emit分发)

//通过this.$root.eventHub获取此对象
this.$root.eventHub.$emit('事件名称', '这里是参数，选中后的地址')

4). 在home组件中销毁（$off取消）      

beforeDestroy () {
     this.$root.eventHub.$off('事件名称')
  },

注：只要this.$root.eventHub.$off('事件名称')取消了事件，发现再次调用this.$root.eventHub.$on监听时不起作用了，不明白为什么？如果不取消监听就会监听几遍就会调用几遍方法，显然不合理，本人只是在项目中不让其取消监听的情况下做了次判断，让this.$root.eventHub.$on只走一次，不明所以然！希望哪位大神指出错误！！！