Vue bus事件总线的原理与使用-编程知识

Vue bus事件总线的原理与使用

这里写自定义目录标题

一、 Vue Bus 总线原理
二、Vue bus的使用
- - 1、创建总线：在 Vue 应用中，可以创建一个 Vue 实例作为总线，用于管理事件。
  - 2、事件的发布与订阅：组件通过订阅事件来监听总线上的消息，而其他组件则通过发布事件来触发消息。
  - 3、销毁总线：在组件销毁时，应该取消对事件的订阅以防止内存泄漏。
  - 4、注意：
三、Vue bus 实际应用
- - 场景
  - 示例代码

一、 Vue Bus 总线原理

Vue Bus 是一种事件总线的实现方式，用于在不同组件之间进行通信。在 Vue 应用中，父子组件通信相对简单，但当需要在非父子关系的组件之间进行通信时，就需要借助一种中央事件总线的机制，这就是 Vue Bus 的作用。
在这里插入图片描述
说白就是建一个空白的vue，里面只处理 $emit 事件发布、$on事件监听触发以及 $off 事件销毁，来完成多层不同组件之间的通行。

二、Vue bus的使用

1、创建总线：在 Vue 应用中，可以创建一个 Vue 实例作为总线，用于管理事件。

// bus.js
import Vue from 'vue';
export const bus = new Vue();

2、事件的发布与订阅：组件通过订阅事件来监听总线上的消息，而其他组件则通过发布事件来触发消息。

// ComponentA.vue
import { bus } from './bus.js';export default {methods: {handleClick() {bus.$emit('custom-event', 'Hello from Component A!');},},
};

// ComponentB.vue
import { bus } from './bus.js';export default {mounted() {bus.$on('custom-event', (message) => {console.log(message); // Hello from Component A!});},
};

3、销毁总线：在组件销毁时，应该取消对事件的订阅以防止内存泄漏。

// ComponentB.vue
export default {beforeDestroy() {bus.$off('custom-event');},
};

4、注意：

bus总线的on执行先与emit
原因：父子生命周期顺序的影响，父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
bus总线的emit不适宜写在creted中，要写在mounte钩子函数中。
原因：on是要早于emit，而且受父子生命周周期的影响，emit要写在nounted函数里。
发布事件在使用完后，记得off 注销事件，防止内存泄漏。

三、Vue bus 实际应用

场景

考虑一个购物车的应用，有一个商品列表组件和一个购物车组件，它们之间需要实现添加商品到购物车的功能。

示例代码

<!-- ProductList.vue -->
<template><div><div v-for="product in products" :key="product.id"><p>{{ product.name }}</p><button @click="addToCart(product)">Add to Cart</button></div></div>
</template><script>
import { bus } from './bus.js';export default {data() {return {products: [{ id: 1, name: 'Product A' },{ id: 2, name: 'Product B' },{ id: 3, name: 'Product C' },],};},methods: {addToCart(product) {bus.$emit('add-to-cart', product);},},
};
</script>

<!-- ShoppingCart.vue -->
<template><div><h2>Shopping Cart</h2><ul><li v-for="item in cartItems" :key="item.id">{{ item.name }}</li></ul></div>
</template><script>
import { bus } from './bus.js';export default {data() {return {cartItems: [],};},mounted() {bus.$on('add-to-cart', (product) => {this.cartItems.push(product);});},beforeDestroy() {bus.$off('add-to-cart');},
};
</script>