这里写自定义目录标题
- 一、 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>
在这个例子中,ProductList 组件通过 Vue Bus 发送了一个 ‘add-to-cart’ 事件,而 ShoppingCart 组件监听了这个事件,并在事件发生时将商品添加到购物车中。
这就是 Vue Bus 的基本原理和一个实际应用的例子。通过这种方式,不同组件之间可以更轻松地进行通信,提高了组件之间的灵活性和复用性