码迷,mamicode.com
首页 > 其他好文 > 详细

vue eventbus

时间:2020-01-09 18:59:17      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:习惯   param   prototype   更改   监听   prot   keyword   行操作   需要   

这个集中式的事件中间件就是 Bus。我习惯将bus定义到全局:

app.js

var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);

然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:

分发事件的组件

// ...
methods: {
  todo: function () {
    this.$bus.$emit(‘todoSth‘, params);  //params是传递的参数
    //...
  }
}

监听的组件

// ...
created() {
  this.$bus.$on(‘todoSth‘, (params) => {  //获取传递的参数并进行操作
      //todo something
  })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
  this.$bus.$off(‘todoSth‘);
},

如果需要监听多个组件,只需要更改 bus 的 eventName:

// ...
created() {
  this.$bus.$on(‘firstTodo‘, this.firstTodo);
  this.$bus.$on(‘secondTodo‘, this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
  this.$bus.$off(‘firstTodo‘, this.firstTodo);
  this.$bus.$off(‘secondTodo‘, this.secondTodo);
},

vue eventbus

标签:习惯   param   prototype   更改   监听   prot   keyword   行操作   需要   

原文地址:https://www.cnblogs.com/kissfu/p/12172650.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!