Vue JS 2.0 子组件挂载回调

Question

我正在制作一个由 Vue JS 组件构建的表单。我有以下组件树（每个组件都包含它下面的子组件，例如用户注册表将 Form 组件作为其直接子组件）。

1. 用户注册Vue组件
2. 表单 Vue 组件
3. 输入 Vue 组件
4. 输入选项组件

在所有组件都完全呈现后，我需要在用户注册中运行一个函数。我尝试将它放在用户注册 Vue 组件中的挂载函数中，但它在选项组件完成其挂载函数之前运行。

我在这里读到：https : //medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f这不应该发生，并且子组件应该在运行父安装函数之前完全安装，在这种情况下，用户注册 Vue 组件。

我总共有大约 100 个组件，包括表单、输入和所有选项。

我只能在所有内容都完全呈现和加载后在用户注册 Vue 组件中运行所需的代码。我尝试使用 jQuery(document).ready 函数，但结果不一致（有时文档在表单完全安装之前就准备好了）。

有什么建议吗？

Answer 1

如果你需要知道什么时候一个组件已经created，mounted，updated从父组件等，你可以定义使用侦听@hook:其次是生命周期挂钩名。

例如，doSomething()一旦子组件被挂载，就从父组件执行：

<child-component @hook:mounted="doSomething" />

Answer 2

mounted()父组件的 hook 并不能保证所有子组件也完成渲染。

要在渲染整个视图后执行某些操作，请vm.nextTick()在父组件的mounted()钩子内部使用。

//User Registration Vue Component

  mounted(){
    this.$nextTick(()=>{
      //execute your code
      console.log('Finished rendering the complete view')
    })
  }

参考-挂载的生命周期钩子