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

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

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

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

// eventBus.js
import Vue from 'vue';

const EventBus = new Vue();

export default {
  install(Vue) {
    Vue.prototype.$bus = EventBus;  // 将 EventBus 添加到 Vue 原型上
  },
};

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

// 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.在组件中使用：

• 触发事件

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

监听事件

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

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

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

1. 创建插件文件 eventBus.js

// 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.在主文件中引入插件并使用：

// 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.在组件中使用：

• 触发事件：

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

  监听事件：

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);
  });
}

原文地址：https://blog.csdn.net/qq_25416827/article/details/143609107

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！