EventBus是Vue.js中一個基于發(fā)布/訂閱模式的第三方插件,其主要用途是在不同組件間傳遞數(shù)據(jù)。本文將介紹EventBus的基本用法。
首先,在Vue應用中安裝EventBus:
npm install vue-event-bus
在main.js中將EventBus注冊為全局組件:
import Vue from 'vue' import VueEventBus from 'vue-event-bus' Vue.use(VueEventBus)
在組件中使用EventBus:
// 發(fā)送事件 this.$eventBus.emit('eventName', data) // 接收事件 this.$eventBus.on('eventName', (data) =>{ // 處理邏輯 })
在發(fā)送事件時,需要指定一個事件名和要傳遞的數(shù)據(jù),接收事件時,需要指定要監(jiān)聽的事件名和響應事件的函數(shù)。
注意,在使用EventBus時,不要濫用全局事件。過多使用全局事件會給調(diào)試和維護帶來困難,應適度使用。另外,在組件銷毀時,一定要取消事件監(jiān)聽:
// 在組件銷毀前取消事件監(jiān)聽 beforeDestroy() { this.$eventBus.off('eventName') }
上一篇css上移效果
下一篇頁面中引用css樣式