Vue Event Bus 是 Vue.js 的一個插件，它可以幫助開發者在 Vue.js 項目中使用事件總線。購物車是傳統的電商應用程序中不可或缺的一部分。在購物車中，你可以添加或刪除商品，結算等功能。在本文中，我們將學習如何使用 Vue.js 和 Event Bus 來實現一個購物車。
首先，我們需要在 Vue.js 項目中安裝 Event Bus。在 Vue.js 官方文檔中，推薦使用一個簡單的 JavaScript 對象作為 Event Bus。將其命名為 bus.js，代碼如下：
import Vue from 'vue'; export const EventBus = new Vue();
現在，我們已經創建了一個名為“EventBus”的 Vue 實例。在不同的組件中，我們可以使用這個實例來發射事件和監聽事件。讓我們創建一個購物車組件：
Vue.component('cart-component', {
template: `My Cart
- {{ item.name }} - {{ item.price }} - {{ item.quantity }}
Total: {{ total.toFixed(2) }}
`,
data() {
return {
cartItems: [],
total: 0
}
},
created() {
EventBus.$on('add-to-cart', item =>{
const existingItemIndex = this.cartItems.findIndex(i =>i.id === item.id);
if (existingItemIndex >-1) {
this.cartItems[existingItemIndex].quantity++;
} else {
item.quantity = 1;
this.cartItems.push(item);
}
this.total += item.price;
});
},
methods: {
removeItem(index) {
const item = this.cartItems[index];
this.cartItems.splice(index, 1);
this.total -= item.price * item.quantity;
}
}
});該組件包含一個列表，在列表中顯示購物車中的每個元素。我們也顯示了總金額。
當使用組件時，我們可以在任何地方發射“add-to-cart”事件，該事件帶有一個商品對象作為參數。該組件監聽“add-to-cart”事件并更新購物車狀態。例如，我們可以在其他組件中調用以下代碼來添加商品到購物車中：
EventBus.$emit('add-to-cart', { id: 1, name: 'T-Shirt', price: 29.99 });這是 Vue.js 和 Event Bus 實現購物車的基本步驟。使用事件總線，我們可以在不同的組件之間傳遞信息，進行協同開發。此外，可以使用 Event Bus 來實現其他許多功能。例如，在應用程序中創建自定義消息系統，實現驗證程序和全局通知等。