Question

以前从未使用过Vue.js。我有一个父组件和两个子组件。这两个子组件应使用本机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”钩子中定义了事件处理程序，我可以确定在Child1或Child2的任何“已安装”钩子之前，将对Child1和Child2组件的“ beforeCreate”钩子进行初始化。被Vue呼叫？

Answer 1

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

来自here的图片来源

要做到这一点，您可以在父级中定义一个布尔标志，在挂接的钩子中将此标志更改为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")
        }
      }
    }
}

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

1 个答案: