时间戳

首页 > 解决方案 > Vue JS 2.0 子组件挂载回调

javascript - Vue JS 2.0 子组件挂载回调

问题描述

我正在制作一个由 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 函数，但结果不一致（有时文档在表单完全安装之前就准备好了）。

有什么建议吗？

标签： javascriptvue.jsvuejs2

解决方案

如果您需要知道组件何时来自父组件created，您可以使用后跟生命周期挂钩名称定义一个侦听器。mountedupdated@hook:

doSomething()例如，一旦安装子组件，就从父组件执行：

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

推荐阅读