VueJS发出的事件不会被同一层次结构中的其他组件捕获

Question

我见过this question并尝试了this.$parent和this.$root替代方案，但无济于事。情况如下。

App.vue

<template>
    <div id="app">
        <global-notifications/>
        <router-view></router-view>
    </div>
</template>

<script>
import GlobalNotifications from "./components/GlobalNotifications.vue"

export default {
    name: "app",
    components: {
        GlobalNotifications
    }
};
</script>

GlobalNotifications.vue

<template>
    <div>
        <p>Notifications:</p>
        <p v-for="n in notifications" :key="n.id">{{ n }}</p>
        <b-button @click="internalEmitter">Internal notification!</b-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            notifications: []
        }
    },
    methods: {
        appendNotification(n) {
            this.notifications = [...this.notifications, n]
        },
        internalEmitter() {
            let message = { id: `${Math.floor(Math.random()*1000000)}`, message: 'From the inside!' }
            this.$emit('global-notification', message)
        }
    },
    mounted() {
        this.$on('global-notification', this.appendNotification)
    },
    beforeDestroy() {
        this.$off('global-notification', this.appendNotification)
    }
}
</script>

Dashboard.vue

通过路由器加载。是的，我尝试直接从App.vue加载。

<template>
    <b-button @click="emitTheThing">External notification!</b-button>
</template>

<script>
export default {
    methods: {
        emitTheThing() {
            let message = { id: `${Math.floor(Math.random()*1000000)}`, message: 'From the outside!' }
            this.$emit('global-notification', message)
        }
    }
}
</script>

当我点击Internal notification!按钮时，我会触发并捕获事件，一切都按预期工作。但是，当我点击External notification!按钮时，我能看到的事件的唯一证据就是在Vue Dev工具中，在那里我看到发出的事件。

正如我所说，我尝试在$parent甚至$root上发布，但我只看到开发工具中的事件，在<App>和<Root>上发出， 分别。但是，GlobalNotification孩子似乎没有抓住他们。

我错过了什么？

Answer 1

问题是当<global-notifications>组件在根组件上发出事件时，它会自己侦听事件。请注意，在根组件上发出事件会不将事件广播到根的子组件（正如您在Vue DevTools中观察到的那样）。

在你的情况下快速修复是使用$root.$on()，以便它在根组件上设置监听器：

mounted() {
    // this.$on('global-notification', this.appendNotification)
    this.$root.$on('global-notification', this.appendNotification)
},

然后，您可以使用任何层次结构中任何组件的$root.$emit()向根组件发出事件。

demo