Vue братья и сестры компоненты перехватывает отношения жизненного цикла

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, могу ли я быть уверен, что хуки beforeCreate обоихКомпоненты Child1 и Child2 будут инициализированы до того, как Vue вызовет какой-либо из «установленных» хуков Child1 или Child2?

Answer 1

Вы можете использовать порядок подключения компонентов между родителями и дочерними элементами.Когда вызывается родительский mounted, мы будем уверены, что все дочерние компоненты созданы и смонтированы.

Источник изображения из здесь

Чтобы сделать это, вы можете определить логический флаг в parent, изменить этот флаг на 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" />

Наконец, в дочернем компоненте, отслеживание смены реквизита.Когда флаг меняется на 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")
        }
      }
    }
}