1、使用 p a r e n t 屬性訪問祖父組件,并通過 parent屬性訪問祖父組件,并通過 parent屬性訪問祖父組件,并通過emit方法觸發(fā)祖父組件的事件
this.$parent.$emit('event-name', data);
2、使用provide和inject方法,在祖父組件中提供一個方法或?qū)傩?,孫組件中通過inject方法獲取這個方法或?qū)傩?,并在孫組件中調(diào)用該方法或?qū)傩詠碛|發(fā)祖父組件文章來源:http://www.zghlxwxcb.cn/news/detail-649675.html
// 祖父組件中
provide() {
return {
trigger: this.trigger
}
},
methods: {
trigger(data) {
// 處理數(shù)據(jù)
}
}
// 孫組件中
inject: ['trigger'],
methods: {
handleClick() {
this.trigger(data);
}
}
3、使用事件總線,祖父組件中創(chuàng)建一個Vue實例作為事件總線,然后在祖父組件、父組件和孫組件中分別使用 e m i t 和 emit和 emit和on方法來進行事件的傳遞和監(jiān)聽。文章來源地址http://www.zghlxwxcb.cn/news/detail-649675.html
// 祖父組件中
const eventBus = new Vue();
// 父組件中
eventBus.$on('event-name', data => {
// 處理數(shù)據(jù)
})
// 孫組件中
eventBus.$emit('event-name', data);
到了這里,關(guān)于vue2中祖父組件和孫組件事件通信的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!