Vue JS 2.0 子组件挂载回调 [英] Vue JS 2.0 Child Component Mounted Callback

问题描述

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

I am making a form built of Vue JS components. I have the following components tree (each component contains the child below it ex. User Registration Form has the Form component as its direct child).

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

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

After all of the components have full rendered I need to run a function in the User Registration. I tried putting it in the mounted function in the User Registration Vue Component but it runs before the Option Components have completed their mounted function.

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

I read here: https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f that this should not happen and that the child component should be completely mounted before the running the parent mounted function, in this situation the User Registration Vue Component.

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

I have about 100 components total including the Form, Inputs and all of the options.

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

I can only run this desired code in the User Registration Vue Component after everything has fully rendered and loaded. I tried using the jQuery(document).ready function but I have inconsistent results (sometimes the document is ready before the forms have fully mounted).

有什么建议吗?

推荐答案

如果您需要知道组件何时created、mounted、updated 等来自父组件，您可以使用 @hook: 后跟生命周期钩子名称来定义侦听器.

If you need to know when a component has been created, mounted, updated etc. from a parent component, you can just define a listener using @hook: followed by the lifecycle hook name.

例如子组件挂载后，从父组件执行doSomething():

E.g. from the parent component to execute doSomething() once the child component is mounted:

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

这篇关于Vue JS 2.0 子组件挂载回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！