Brand new to utilizing Vue.js. I am exploring the concept of having a single parent component and two child components that need to communicate asynchronously through Vue's event bus system. This involves using a dummy Vue object as a shared container for the event bus.
Here is an example setup:
EventBus.js
import Vue from "vue"
export default new Vue()
Parent.vue
import Child1 from "./Child1.vue"
import Child2 from "./Child2.vue"
export default {
name: "Parent",
components: {
child1: Child1,
child2: Child2,
}
}
Child1.vue
import EventBus from "./EventBus"
export default {
name: "Child1",
beforeCreate () {
EventBus.$once("MY_EVENT_X", async () => {
EventBus.$emit("MY_EVENT_Y")
})
},
mounted () {
// perform some action
}
}
Child2.vue
import EventBus from "./EventBus"
export default {
name: "Child2",
beforeCreate () {
EventBus.$once("MY_EVENT_Y", async () => {
// do something
})
},
mounted () {
EventBus.$emit("MY_EVENT_X")
}
}
In this scenario, my concern lies in the initialization order of the "beforeCreate" hooks compared to the "mounted" hooks within both Child1 and Child2 components in Vue. Can I guarantee that the "beforeCreate" hook will run prior to any "mounted" hook being executed?