Родственные компоненты Vue связывают отношения жизненного цикла
Никогда раньше не использовал Vue.js. У меня есть один родительский компонент и 2 дочерних компонента. Эти 2 дочерних компонента должны взаимодействовать с асинхронными действиями, используя собственную систему шины событий Vue (с фиктивным объектом Vue, используемым в качестве общего контейнера для шины событий).
Имея что-то вроде следующего:
EventBus.js
import Vue from "vue"
export default new Vue()
Родитель.vue
import Child1 from "./Child1.vue"
import Child2 from "./Child2.vue"
export default {
name: "Parent",
components: {
child1: Child1,
child2: Child2,
}
}
Ребенок1.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 будет вызван Вью?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать порядок подключения компонентов между родительским и дочерним элементами. Когда вызывается родитель 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")
}
}
}
}
Я не уверен в порядке рендеринга родственных компонентов. Но вы можете управлять им с помощью вышеуказанной техники или другой техники в stackoverflow.com/questions/43071742/….
Привет, спасибо за ответ. Из приведенного выше графика я должен предположить, что каждый дочерний элемент полностью последовательно инициализируется, поэтому Vue вызывает все хуки (по порядку) из Child1, а затем делает то же самое для Child2. Это правильно? Вместо этого я надеялся, что Vue вызывает хуки в таком порядке, как beforeCreate[Child1], beforeCreate[Child2], created[Child1], created[Child2] и т. д.