vue3 Bus总线组件通讯(任意两组件通信)

ahwangzc

已于 2023-02-15 14:52:21 修改

阅读量208

点赞数

分类专栏： vue 文章标签： vue.js Powered by 金山文档

于 2023-02-08 08:47:22 首次发布

本文链接：https://blog.csdn.net/ahwangzc/article/details/128929068

版权

vue 专栏收录该内容

49 篇文章 3 订阅

订阅专栏

文章介绍了Bus.js类，它包含$on、$emit和$off方法用于事件订阅、发布和取消订阅。在组件A.vue中，通过Bus.js监听并改变message。组件B.vue则触发事件和修改Bus.js中的msg值，展示了如何在Vue组件之间通过Bus.js进行通信。

摘要由CSDN通过智能技术生成

Bus.js 里有一个 Bus 类

eventList 是必须项，用来存放事件列表的。

constructor 里除了 eventList 外，其他都是自定义数据，公共数据就是存在这里的。

$on 方法用来注册事件。

$emit 方法可以调用 $on 里的事件。

$off 方法可以注销 eventList 里的事件。

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>