Vue中使用Bus(事件總線)這個概念來實現在組件之間通信的目的。Vue.js的Event Bus實際上是一個基于Vue實例的事件中心,可以用作組件之間的通信媒介。
Vue Bus(事件總線)的實現非常簡單。要使用Vue Bus,首先需要創建一個Vue實例(或初始根實例)來做為事件總線。然后,我們使用該實例的$emit(或$on)方法來監聽(或觸發)事件。下面是一個使用事件總線的示例:
// main.js
import Vue from 'vue'
export const EventBus = new Vue()
// Component A
export default {
created() {
EventBus.$on('event-name', this.doSomething)
},
methods: {
doSomething() {
console.log('something is done');
}
}
}
// Component B
export default {
methods: {
handleClick() {
EventBus.$emit('event-name')
}
}
}
上面的示例中,我們在main.js中創建了一個vue實例作為事件總線。組件A使用了$on方法來監聽名為“event-name”的事件,當這一事件被觸發時,它將調用組件A的doSomething方法。組件B使用$emit方法來觸發名為“event-name”的事件,從而間接地調用了組件A的doSomething方法。
Vue EventBus(事件總線)讓組件之間的通信變得非常簡單。使用Vue Bus,我們可以輕松地將Vue組件構建成靈活可擴展的應用程序。除此之外,它還提供了更為復雜的通信方案。
上一篇vue導出不清晰