javascript - Vue 兄弟组件 Hook 生命周期关系

Question

从未使用过Vue.js前。我有一个父组件和 2 个子组件。这 2 个子组件应该使用原生 Vue 事件总线系统(使用虚拟 Vue 对象作为事件总线的共享容器)与异步操作交互。

有如下内容:

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 () {
        // something
    }

}

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")
    }

}

我的问题:在“beforeCreate” Hook 中定义了事件处理程序，我能否确定 Child1 和 Child2 组件的“beforeCreate” Hook 将在 Child1 或 Child2 的任何“已安装” Hook 之前被初始化被 Vue 调用？

Answer 1

您可以利用父项和子项之间的组件 Hook 顺序。当调用父级 mounted 时，我们将确保创建并安装所有子组件。

图片来源自here

为此，您可以在 parent 中定义一个 bool 标志，在 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" />

最后，在子组件中，观察 props 的变化。当标志更改为 true 时，我们知道所有子组件都已准备就绪。是时候发出事件了。

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")
        }
      }
    }
}