在開發(fā)Vue應(yīng)用程序時(shí)，我們通常會(huì)使用EventBus來實(shí)現(xiàn)組件之間的通信。Vue實(shí)例提供了一個(gè)內(nèi)置時(shí)的EventBus，即$on方法。$on可以讓我們向Vue實(shí)例注冊(cè)一個(gè)事件監(jiān)聽器，以便我們?cè)谑录挥|發(fā)時(shí)可以執(zhí)行相應(yīng)的操作。

然而，有時(shí)候我們?cè)谑褂?on方法時(shí)，可能會(huì)遇到一些報(bào)錯(cuò)。其中最常見的報(bào)錯(cuò)是“Cannot read property '$on' of undefined”。

Vue.component('child-component', {
methods: {
clickHandler() {
this.$emit('test-event');
}
}
});
Vue.component('parent-component', {
mounted() {
this.$on('test-event', () =>{
console.log('Test event triggered');
});
}
});

在上面的代碼中，我們?cè)谧咏M件中使用$emit觸發(fā)一個(gè)事件，然后在父組件中使用$on監(jiān)聽這個(gè)事件。然而，當(dāng)我們?cè)诟附M件中使用$on方法時(shí)，可能會(huì)遇到“Cannot read property '$on' of undefined”這個(gè)報(bào)錯(cuò)。

這個(gè)報(bào)錯(cuò)的原因是因?yàn)槲覀儧]有在組件實(shí)例中顯式地聲明Vue實(shí)例，也就是說，在父組件中使用this.$on()方法，代表的是組件實(shí)例本身。如果我們沒有在組件中顯式地聲明Vue實(shí)例，那么組件實(shí)例就無法訪問到Vue實(shí)例提供的$on方法。

為了解決這個(gè)問題，我們需要在組件實(shí)例中顯式地聲明Vue實(shí)例：

Vue.component('parent-component', {
mounted() {
const vm = this;
vm.$on('test-event', () =>{
console.log('Test event triggered');
});
}
});

在上面的代碼中，我們使用const vm = this來聲明組件實(shí)例中的Vue實(shí)例。這樣，我們就可以在組件實(shí)例中使用$on方法了。