vue2与vue3的全局通信插件，如何实现自定义的插件

Vue 2 自定义插件（事件总线实现）

在 Vue 2 中，可以通过事件总线来实现全局通信。以下是创建一个简单事件总线插件的步骤：

1. 创建插件文件 eventBus.js：

   javascript
   复制代码
   // eventBus.js
   import Vue from 'vue';
   
   const EventBus = new Vue();
   
   export default {
     install(Vue) {
       Vue.prototype.$bus = EventBus;  // 将 EventBus 添加到 Vue 原型上
     },
   };
   

2. 在主文件中引入插件并使用：

   javascript
   复制代码
   // main.js
   import Vue from 'vue';
   import App from './App.vue';
   import EventBus from './eventBus';
   
   Vue.use(EventBus);
   
   new Vue({
     render: (h) => h(App),
   }).$mount('#app');
   

3. 在组件中使用：

   • 触发事件：

     javascript
     复制代码
     this.$bus.$emit('my-event', { data: 'Hello, World!' });
     

   • 监听事件：

     javascript
     复制代码
     this.$bus.$on('my-event', (payload) => {
       console.log(payload.data);
     });
     

Vue 3 自定义插件（使用 provide 和 inject 实现）

在 Vue 3 中推荐使用 provide 和 inject API 来进行全局通信，可以实现更灵活的插件结构。

1. 创建插件文件 eventBus.js：

   javascript
   复制代码
   // eventBus.js
   import { reactive } from 'vue';
   
   const EventBus = reactive({
     events: {},
   
     on(event, callback) {
       if (!this.events[event]) {
         this.events[event] = [];
       }
       this.events[event].push(callback);
     },
   
     off(event, callback) {
       if (!this.events[event]) return;
       this.events[event] = this.events[event].filter(cb => cb !== callback);
     },
   
     emit(event, payload) {
       if (!this.events[event]) return;
       this.events[event].forEach(callback => callback(payload));
     },
   });
   
   export default {
     install(app) {
       app.provide('eventBus', EventBus);
     },
   };
   

2. 在主文件中引入插件并使用：

   javascript
   复制代码
   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import EventBus from './eventBus';
   
   const app = createApp(App);
   app.use(EventBus);
   app.mount('#app');
   

3. 在组件中使用：

   • 触发事件：

     javascript
     复制代码
     import { inject } from 'vue';
     
     setup() {
       const eventBus = inject('eventBus');
       
       function triggerEvent() {
         eventBus.emit('my-event', { data: 'Hello, World!' });
       }
     
       return { triggerEvent };
     }
     

   • 监听事件：

     javascript
     复制代码
     import { inject, onMounted, onUnmounted } from 'vue';
     
     setup() {
       const eventBus = inject('eventBus');
     
       function handleEvent(payload) {
         console.log(payload.data);
       }
     
       onMounted(() => {
         eventBus.on('my-event', handleEvent);
       });
     
       onUnmounted(() => {
         eventBus.off('my-event', handleEvent);
       });
     }
     

这样，你就完成了一个简单的全局通信插件，并可以在 Vue 2 和 Vue 3 中灵活使用。

4o