Javascript Vue同级组件挂钩生命周期关系

以前从未使用过。我有一个父组件和两个子组件。这两个子组件应使用本机Vue事件总线系统（使用虚拟Vue对象作为事件总线的共享容器）与异步操作交互

具有如下特征：

EventBus.js

Parent.vue

儿童1.vue

儿童2.vue

---

我的问题：在“beforeCreate”钩子中定义事件处理程序后，我是否可以确保Child1和Child2组件的“beforeCreate”钩子将在Vue调用Child1或Child2的任何“已装入”钩子之前被初始化？

您可以利用父级和子级之间的组件钩子顺序。当调用parent

mounted

时，我们将确保创建并装载所有子组件

图像源于

为此，您可以在parent中定义布尔标志，在mounted hook中将此标志更改为true：

import Child1 from "./Child1.vue"
import Child2 from "./Child2.vue"

export default {

    name: "Parent",

    components: {
        child1: Child1,
        child2: Child2,
    },
    data: () => ({
      isChildMounted: false
    }),
    mounted() {
      this.isChildMounted = true
    }
}

确保将此标志传递给子组件：

<child-2 :isReady="isChildMounted" />

---

嗨，谢谢你的回答。从上面的图中，我必须假设每个子对象都是按顺序完全初始化的，因此Vue（按顺序）从Child1调用所有挂钩，然后对Child2执行相同的操作。这是正确的吗？相反，我希望Vue按照beforeCreate[Child1]、beforeCreate[Child2]、created[Child1]、created[Child2]等顺序调用钩子。我不确定同级组件的呈现顺序。但您可以通过上述技术或其他技术来控制它

import EventBus from "./EventBus"

export default {

    name: "Child1",

    beforeCreate () {

        EventBus.$once("MY_EVENT_X", async () => {
            EventBus.$emit("MY_EVENT_Y")
        })

    },

    mounted () {
        // something
    }

}

import EventBus from "./EventBus"

export default {

    name: "Child2",

    beforeCreate () {

        EventBus.$once("MY_EVENT_Y", async () => {
            // do something 
        })

    },

    mounted () {
        EventBus.$emit("MY_EVENT_X")
    }

}

import Child1 from "./Child1.vue"
import Child2 from "./Child2.vue"

export default {

    name: "Parent",

    components: {
        child1: Child1,
        child2: Child2,
    },
    data: () => ({
      isChildMounted: false
    }),
    mounted() {
      this.isChildMounted = true
    }
}

<child-2 :isReady="isChildMounted" />

import EventBus from "./EventBus"

export default {
    name: "Child2",
    props: ['isReady'],
    beforeCreate () {
      EventBus.$once("MY_EVENT_Y", async () => {
          // do something 
      })
    },
    watch: {
      isReady: function (newVal) {
        if (newVal) {
          // all child component is ready
          EventBus.$emit("MY_EVENT_X")
        }
      }
    }
}