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

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


javascript vue.js vuejs2 lifecycle hook
person revy    schedule 17.02.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

введите здесь описание изображения

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

Для этого вы можете определить логический флаг в родительском элементе, изменив этот флаг на 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")
        }
      }
    }
}
person ittus    schedule 18.02.2019
comment
Привет спасибо за ответ Из приведенного выше графика я должен предположить, что каждый дочерний элемент полностью инициализирован в последовательности, поэтому Vue вызывает все хуки (по порядку) из Child1, а затем делает то же самое для Child2. Это верно? Вместо этого я надеялся, что хуки были вызваны Vue в таком порядке, как beforeCreate [Child1], beforeCreate [Child2], created [Child1], created [Child2] и т. Д. - person revy; 18.02.2019
comment
Я не уверен в порядке рендеринга родственных компонентов. Но вы можете управлять им с помощью вышеуказанной техники или другой техники в stackoverflow.com/questions/43071742/ - person ittus; 18.02.2019