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 自定义插件(使用 provideinject 实现)

在 Vue 3 中推荐使用 provideinject 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);
  });
}
相关推荐
天下无贼8 分钟前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍9 分钟前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子1 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院1 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰1 小时前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
OpenTiny社区1 小时前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
耶耶耶1111 小时前
web服务代理用它,还不够吗?
前端
Liamhuo1 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_1 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生2 小时前
React 组件渲染
前端·react.js