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

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

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

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

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.off('事件名称')取消了事件，发现再次调用this.on监听时不起作用了，不明白为什么？假如不取消监听就会监听几遍就会调用几遍方法，显然不正当，本人只是在项目中不让其取消监听的情况下做了次判断，让this.on只走一次，不明所以然！希望哪位大神指出错误！！！