[JavaScript知识库]手写Bus实现Vue组件间传值

手写一个构造函数用于vue组件传值

class Bus {
  constructor () {
    this.list = {}
  }
  $on (name, fn) {
    this.list[name] = this.list[name] || []
    this.list[name].push(fn)
  }
  $emit (name, data) {
    if (this.list[name]) {
      this.list[name].forEach(fn => {
        fn(data)
      })
    }
  }
  $off (name) {
    if (this.list[name]) {
      delete this.list[name]
    }
  }
}
export default new Bus()

两个同级的兄弟组件都引入Bus

其中一个通过Bus.$on(' ',function) 监听事件

import Bus from '../utils/bus.js'

export default defineComponent({
  setup () {
    Bus.$on('changeNum', () => {
      data.num++
    })
    const data = reactive({
      num: 0
    })
    return { ...toRefs(data) }
  }
})

另一个通过Bus.$emit(' ',data) 触发事件

import Bus from '../utils/bus.js'

export default defineComponent({
  setup () {
    const changeNum = () => {
      Bus.$emit('changeNum')
    }
    return { changeNum }
  }
})

监听的一方要消除Bus上的事件，否则事件会一直累加，下次调用就会触发多次

    onUnmounted(() => {
      Bus.$off('changeNum')
    })

该Bus在vue2/vue3都可使用