vue3中事件总线

在 Vue 3 中，eventBus 的概念已经被弱，不保举使用全局事件总线，
你需要一个轻量级的事件总线，可以自己封装一个 EventBus 类，也有一些替换方案
1、使用第三方库（如 mitt 或 tiny-emitter）

mitt 是一个轻量级的事件发射器，适合在 Vue 3 中替换事件总线。它不依赖 Vue 实例，体积小且易于使用。

1. npm install mitt

复制代码

1. // src/utils/eventBus.js
2. import mitt from 'mitt';
4. export const emitter = mitt();

复制代码

1. import { emitter } from './utils/eventBus';
2. // 触发事件
3. emitter.emit('event-name', data);
4. // 取消监听
5. emitter.off('event-name', handler);

复制代码

2、依赖注入

provide 和 inject 是 Vue 3 保举的父子组件通信方式，适合在组件树中传递数据。

1. // 父组件
2. import { provide } from 'vue';
3. export default {
4.   setup() {
5.     provide('message', 'Hello from Parent');
6.   }
7. };

复制代码

1. // 子组件
2. import { inject } from 'vue';
3. export default {
4.   setup() {
5.     const message = inject('message');
6.     console.log(message);
7.   }
8. };

复制代码

3、使用vuex或者pina

对于复杂的状态管理，保举使用 Vuex 或 Pinia。它们提供了更强大的状态管理能力，适合大型项目。

1. // store.js
2. import { createStore } from 'vuex';
3. export default createStore({
4.   state: {
5.     message: 'Hello from Vuex'
6.   },
7.   mutations: {
8.     updateMessage(state, payload) {
9.       state.message = payload;
10.     }
11.   }
12. });

复制代码

1. import { useStore } from 'vuex';
2. export default {
3.   setup() {
4.     const store = useStore();
5.     store.commit('updateMessage', 'New Message');
6.     console.log(store.state.message);
7.   }
8. };

复制代码

4、使用props和emits

对于父子组件通信，props 和 emits 是最直接的方式。

1. <template>
2.   <ChildComponent :message="message" @update="handleUpdate" />
3. </template>
5. <script>
6. import ChildComponent from './ChildComponent.vue';
8. export default {
9.   components: {
10.     ChildComponent
11.   },
12.   data() {
13.     return {
14.       message: 'Hello from Parent'
15.     };
16.   },
17.   methods: {
18.     handleUpdate(newMessage) {
19.       this.message = newMessage;
20.     }
21.   }
22. };
23. </script>

复制代码

1. <template>
2.   <button @click="updateMessage">Update Message</button>
3. </template>
5. <script>
6. export default {
7.   props: ['message'],
8.   emits: ['update'],
9.   methods: {
10.     updateMessage() {
11.       this.$emit('update', 'New Message');
12.     }
13.   }
14. };
15. </script>

复制代码

5、自己封装

在 Vue 3 中，你可以通过创建一个 Vue 实例作为事件总线来实现类似的功能。

1. // src/eventBus.js
2. import { createApp } from 'vue';
4. const eventBus = createApp({});
6. // 添加自定义事件方法
7. eventBus.config.globalProperties.$emit = function (event, ...args) {
8.   this._eventBus.emit(event, ...args);
9. };
11. eventBus.config.globalProperties.$on = function (event, callback) {
12.   this._eventBus.on(event, callback);
13. };
15. eventBus.config.globalProperties.$off = function (event, callback) {
16.   this._eventBus.off(event, callback);
17. };
19. // 创建一个内部的事件总线
20. eventBus._eventBus = {
21.   events: {},
22.   
23.   on(event, callback) {
24.     if (!this.events[event]) {
25.       this.events[event] = [];
26.     }
27.     this.events[event].push(callback);
28.   },
29.   
30.   emit(event, ...args) {
31.     if (this.events[event]) {
32.       this.events[event].forEach(callback => {
33.         callback(...args);
34.       });
35.     }
36.   },
37.   
38.   off(event, callback) {
39.     if (this.events[event]) {
40.       this.events[event] = this.events[event].filter(cb => cb !== callback);
41.     }
42.   }
43. };
45. export default eventBus;

复制代码

子组件

1. // src/eventBus.js
2. import { createApp } from 'vue';
4. const eventBus = createApp({});
6. // 添加自定义事件方法
7. eventBus.config.globalProperties.$emit = function (event, ...args) {
8.   this._eventBus.emit(event, ...args);
9. };
11. eventBus.config.globalProperties.$on = function (event, callback) {
12.   this._eventBus.on(event, callback);
13. };
15. eventBus.config.globalProperties.$off = function (event, callback) {
16.   this._eventBus.off(event, callback);
17. };
19. // 创建一个内部的事件总线
20. eventBus._eventBus = {
21.   events: {},
22.   
23.   on(event, callback) {
24.     if (!this.events[event]) {
25.       this.events[event] = [];
26.     }
27.     this.events[event].push(callback);
28.   },
29.   
30.   emit(event, ...args) {
31.     if (this.events[event]) {
32.       this.events[event].forEach(callback => {
33.         callback(...args);
34.       });
35.     }
36.   },
37.   
38.   off(event, callback) {
39.     if (this.events[event]) {
40.       this.events[event] = this.events[event].filter(cb => cb !== callback);
41.     }
42.   }
43. };
45. export default eventBus;

复制代码

父组件：

1. <template>
2.   <ChildComponent />
3. </template>
5. <script>
6. import ChildComponent from './ChildComponent.vue';
7. import eventBus from '../eventBus';
9. export default {
10.   components: {
11.     ChildComponent
12.   },
13.   created() {
14.     // 监听事件
15.     eventBus.$on('custom-event', this.handleCustomEvent);
16.   },
17.   beforeUnmount() {
18.     // 组件销毁时移除事件监听
19.     eventBus.$off('custom-event', this.handleCustomEvent);
20.   },
21.   methods: {
22.     handleCustomEvent(message) {
23.       console.log('Event received:', message);
24.       // 在这里处理逻辑
25.     }
26.   }
27. }
28. </script>

复制代码

使用类方法封装一个事件总线

1. // src/utils/EventBus.js
3. class EventBus {
4.   constructor() {
5.     this.events = {};
6.   }
8.   /**
9.    * 监听事件
10.    * @param {string} event - 事件名称
11.    * @param {Function} callback - 回调函数
12.    */
13.   $on(event, callback) {
14.     if (!this.events[event]) {
15.       this.events[event] = [];
16.     }
17.     this.events[event].push(callback);
18.   }
20.   /**
21.    * 触发事件
22.    * @param {string} event - 事件名称
23.    * @param {...any} args - 传递给回调函数的参数
24.    */
25.   $emit(event, ...args) {
26.     if (this.events[event]) {
27.       this.events[event].forEach(callback => {
28.         callback(...args);
29.       });
30.     }
31.   }
33.   /**
34.    * 移除事件监听
35.    * @param {string} event - 事件名称
36.    * @param {Function} callback - 回调函数
37.    */
38.   $off(event, callback) {
39.     if (this.events[event]) {
40.       this.events[event] = this.events[event].filter(cb => cb !== callback);
41.     }
42.   }
44.   /**
45.    * 一次性监听事件
46.    * @param {string} event - 事件名称
47.    * @param {Function} callback - 回调函数
48.    */
49.   $once(event, callback) {
50.     const onceCallback = (...args) => {
51.       callback(...args);
52.       this.$off(event, onceCallback);
53.     };
54.     this.$on(event, onceCallback);
55.   }
56. }
58. // 创建一个 EventBus 实例
59. const eventBus = new EventBus();
61. export default eventBus;

复制代码

子组件

1. <template>
2.   <button @click="handleClick">点击我</button>
3. </template>
5. <script>
6. import eventBus from '../utils/EventBus';
8. export default {
9.   methods: {
10.     handleClick() {
11.       // 触发事件
12.       eventBus.$emit('custom-event', 'Hello from Child');
13.     }
14.   }
15. }
16. </script>

复制代码

父组件

1. <template>
2.   <ChildComponent />
3. </template>
5. <script>
6. import ChildComponent from './ChildComponent.vue';
7. import eventBus from '../utils/EventBus';
9. export default {
10.   components: {
11.     ChildComponent
12.   },
13.   created() {
14.     // 监听事件
15.     eventBus.$on('custom-event', this.handleCustomEvent);
16.   },
17.   beforeUnmount() {
18.     // 组件销毁时移除事件监听
19.     eventBus.$off('custom-event', this.handleCustomEvent);
20.   },
21.   methods: {
22.     handleCustomEvent(message) {
23.       console.log('Event received:', message);
24.       // 在这里处理逻辑
25.     }
26.   }
27. }
28. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。