Vue2.x eventBus全局管理事件的“订阅/发布”

文章目录

参考

1. Vue $on

问题描述

1. 用户信息列表是单独封装的一个组件，不依赖于其他模块和参数
2. 业务场景是预约可以创建多个case，每个case 可以选择相关人员，现在人员可以单独添加，并作用到当前选择人员组件中
3. 问题：如何修改一个组件的时候，去影响到其他组件呢？

解决办法

1. 使用“观察者模式” / “订阅/发布”
2. 项目启动的时候创建一个EventBus，在整个工程中是唯一（single）
3. 人员组件创建的时候添向EventBus中注册一个事件监听，组件销毁的时候就就取消注册
4. 因此，创建多少个人员组件就会有多少个组件监听
5. 添加人员成功，就触人员组件内部的监听方法

知识点

1. Vue.$on 监听 当前实例 上的自定义事件。

   事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

2. Vue.$off 移除自定义事件监听器。

   vm.$off( [event, callback] )

   如果没有提供参数，则移除所有的事件监听器；
   如果只提供了事件，则移除该事件所有的监听器；
   如果同时提供了事件与回调，则只移除这个回调的监听器。

自定义EventBus

1. 定义一个统一事件管理器

// 插件挂载方式
import Vue from 'vue'
// Bus 就是一个Vue对象，因此Vue.$on: 监听`当前实例`上的自定义事件
let Bus = new Vue()
let install = (Vue) => {
  Vue.prototype.Bus = Bus
}

export default { install }

2. 引用EventBus

import Vue from 'vue'
import Bus from '@/assets/js/eventBus'
Vue.use(Bus)

3. 在自定义组件中监听事件

export default {
  name: '',
  data () {
    return {
    }
  },
  // 创建组件的时候监听事件
  created () {
    this.Bus.$on('newAddCase', this.addNewCase)
  },
  // 组件销毁的时候 删除监听的事件
  beforeDestroy () {
    this.Bus.$off('newAddCase', this.addNewCase)
  },
  methods: {
  }
}

4. 业务逻辑中触发事件

export default {
  name: '',
  data () {
    return {
    }
  },
  methods: {
    addToCaseList (caseIndexCode) {
      // this.Bus.$emit('newAddCase', tmpObj)
      this.Bus.$emit('newAddCase', tmpObj, '参数一')
    },
  }
}