I've seen this question and tried both the this.$parent and the this.$root alternatives, to no avail. The situation is as follows.
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
Gets loaded through the router. Yes, I tried loading it directly from 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>
When I click on the Internal notification! button, I get events fired and caught, and everything works as expected. However, when I click on the External notification! button, the only evidence of events flying around that I can see is in the Vue Dev Tools, where I see events being emitted.
As I said, I tried emitting on $parent and even on $root, but I only see the events in the dev tools, being emitted on <App> and <Root>, respectively. However, the GlobalNotification child does not seem to catch them.
What am I missing?
