首页 > 解决方案 > Laravel - Vue JS 兄弟组件通信

问题描述

我无法使用 EventBus 技术与 Vue 通信 b/w 组件

Vue.prototype.$eventBus = new Vue(); // Global event bus

const app = new Vue({
    el: '#dashboard',
    data() {
        return {
            dailyData: []
        }
    },
    components: {
        'latest-feedbacks': LatestFeedbacks,
        'feedbacks-overview': FeedbacksOverview,
    }
});

在最新反馈.vue

...
created() {
     this.$eventBus.$emit('feedbacksChanged');
},
...

在FeedbacksOverview.vue

...
created() {
     this.$eventBus.$on('feedbacksChanged', ()=>{
        // code
     });
},
...

标签: laravelvue.js

解决方案


您可以使用该$root实例来访问垂直链之外的组件。

像这样:

created() {
     this.$root.$emit('feedbacksChanged');
}

created() {
     this.$root.$on('feedbacksChanged', ()=>{
        // code
     });
}

推荐阅读