回顾vue 事件总线

vue中的参数传递方式有

  • 父子组件中通过props,$emit互相传递
  • event bus事件总线
  • vuex

  第一种局限于只能在父子组件中传递,如果要在兄弟组件之间传递就要用到事件总线event bus或者vuex来实现。这里讨论的是event bus这种实现方式。

  这个集中式的事件中间件就是 Bus。

  在man.js中初始化   EventBus

Vue.prototype.$EventBus = new Vue()

然后在组件中,可以使用$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);
},

 

posted @ 2021-06-08 17:32  我有头盔  阅读(45)  评论(0编辑  收藏  举报