vue3 Bus组件通讯

原理

我们创建一个 Bus.js 文件，用来控制数据和注册事件的。

Bus.js 里有一个 Bus 类

• eventList 是必须项，用来存放事件列表的。
• constructor 里除了 eventList 外，其他都是自定义数据，公共数据就是存在这里的。
• $on 方法用来注册事件。
• $emit 方法可以调用 $on 里的事件。
• $off 方法可以注销 eventList 里的事件。

然后需要用到总线的组件，都导入 Bus.js ，就可以共同操作一份数据了。

Bus.js

class Bus {
  constructor() {
    // 收集订阅信息,调度中心
	// 事件列表，这项是必须的
	this.eventList = {},
    // 下面的都是自定义值
	this.msg = ref('这是一条总线的信息')
  }

  // 订阅
  $on(name, fn) {
	this.eventList[name] = this.eventList[name] || []
	this.eventList[name].push(fn)
  }

  // 发布
  $emit(name, data) {
	if (this.eventList[name]) {
      this.eventList[name].forEach((fn) => {
        fn(data)
      });
	}
  }

  // 取消订阅
  $off(name) {
      if (this.eventList[name]) {
	  delete this.eventList[name]
	}
  }
}

export default new Bus()

组件A.vue

<template>
  <div> 
    <span>message: {{ message }}</span>
    <span>msg: {{ msg }}</span>
  </div>
  <Child></Child>
</template>

<script setup>
import Bus from './Bus.js'
import Child from './components/Child.vue'

const msg = $ref(Bus.msg)

const message = $ref('hello')

// 用监听的写法
Bus.$on('changeMsg', data => {
  message = data
})
</script>

组件B.vue

<template>
  <div>
    <button @click="handleBusEmit">触发Bus.$emit</button>
    <button @click="changeBusMsg">修改总线里的 msg</button>
  </div>
</template>

<script setup>
import Bus from '../Bus.js'

function handleBusEmit() {
  Bus.$emit('changeMsg', '雷猴啊')
}

function changeBusMsg() {
  Bus.msg.value = '在子组件里修改了总线的值'
}
</script>