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

honey缘木鱼

发布于 2018-12-28 16:35:25

1.6K0

发布于 2018-12-28 16:35:25

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只走一次，不明所以然！希望哪位大神指出错误！！！

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.12.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度