发布-订阅者模式 VueJS使用

前言

发布–订阅者模式这是设计模式的一种，
通过发布者发布，再由已经订阅的订阅者接收
流程解析：B订阅了A；A通过操作某一特定事件来使B进行后续操作；常用于非父子页面事件交互或传参

实现方式

1. 首先，创建一个事件总线对象，这个对象将包含事件注册、注销和触发的方法

//event-bus.js
const EventBus = {
    events: {},
    //订阅
    on(event, listener) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(listener);
    },
    //取消订阅
    off(event, listener) {
        if (!this.events[event]) return;

        this.events[event] = this.events[event].filter(l => l !== listener);
    },
    //发布
    emit(event, data) {
        if (!this.events[event]) return;

        this.events[event].forEach(listener => listener(data));
    }
};
export default EventBus;

2. 发布事件：使用 EventBus.emit 方法发布事件，传递事件名称和数据。

//Publisher.vue
<template>
    <div class="wrap">
        <button @click="goback">点击发布命令</button>
    </div>
</template>

<script setup>
import EventBus from './event-bus'
const goback = () => {
    EventBus.emit('my-event', 'Hello from Publisher');
}
</script>
<style lang="scss" scoped></style>

3. 订阅事件：使用 EventBus.on 方法订阅事件，并在事件触发时处理事件数据。

//Subscriber.vue
<template>
    <div class="wrap">
        订阅者的内容：{{ state.message }}
    </div>
</template>

<script setup>
import EventBus from './event-bus'
import { reactive} from "vue";
const state = reactive({
    message: ''
});
const handleEvent = (e) => {
    state.message = e;
}
EventBus.on('my-event', handleEvent);
</script>

<style lang="scss" scoped></style>

4. 销毁事件监听器：在组件卸载前使用 EventBus.off 取消事件监听，防止内存泄漏。
   可以在onBeforeUnmount周期中进行消除

  onBeforeUnmount(() => {
      EventBus.off('my-event', handleEvent);
  });

5. 可以在同一页面进行组件间传参(示例：)

// index.vue
<template>
    <div class="wrap">
       <Publisher/>
       <Subscriber/>
    </div>
</template>
<script setup>
import  Publisher from "./Publisher.vue"
import  Subscriber from "./Subscriber.vue"
</script>
<style lang="scss" scoped></style>