代码之家 › 专栏 › 技术社区 › revy

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

lifecycle hook vuejs2 vue.js javascript

revy · 技术社区 · 7 年前

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

有如下特征的:

事件总线.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
    }

}

儿童2.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”钩子中定义了事件处理程序,那么在Vue调用Child1或Child2的任何“mounted”钩子之前,能否确保Child1和Child2组件的“beforeCreate”钩子都已初始化?

0 回复 | 直到 7 年前

ittus 7 年前

您可以利用父级和子级之间的组件挂钩顺序。当父母 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")
        }
      }
    }
}

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

3 年前

Park · Vuejs道具,路径较长

4 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

4 年前

roev · 大堆来自(物体)。forEach不使用vue。js

4 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

8 年前

Ready Dev · Axios一次发出多个请求(vue.js)

8 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

8 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

8 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

8 年前

Tim · VueJS-迭代从AJAX调用返回的数据

8 年前