Question

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

用户注册Vue组件
表单Vue组件
输入Vue组件
输入选项组件

在所有组件都已完全渲染后，我需要在用户注册中运行一个函数。我尝试将它放在User Registration Vue组件中的挂载功能中，但它在Option Components完成挂载功能之前运行。

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

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

我只能在完全渲染和加载所有内容后，在User Registration Vue组件中运行所需的代码。我尝试使用jQuery（document）.ready函数但是我的结果不一致（有时文档在表单完全挂载之前就已经准备好了。）

有什么建议吗？

Answer 1

如果您需要知道某个组件何时是来自父组件的created，mounted，updated等，则可以使用@hook:来定义一个侦听器通过生命周期挂钩名称。

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

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

Answer 2

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

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

//User Registration Vue Component

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

请参阅 - mounted lifecycle hook

Answer 3

由于子安装可能比nextTick（）延迟得更多，因此您可以以编程方式发出事件：

儿童JS：

{
    mounted: function() {
        this.$emit("mounted");
    }
}

父HTML：

<child @mounted="childMounted">

父母JS：

{
    methods: {
        childMounted: function() {
            // TODO child action
        }
    }
}

另一种选择是将子组件用作混入

定义指令：

Vue.directive("mounted", {
    inserted: function(el, binding) {
        binding.value();
    }
});

您无需修改子级，只需修改父级：

父HTML：

<child v-mounted="childMounted">

与（2）中的父母JS相同

Answer 4

谢谢@Tires，它运行良好

Vue.directive("mounted", {
    inserted: function(el, binding) {
        binding.value();
    }
});

家长：

<child v-mounted="childMounted">

{
    methods: {
        childMounted: function() {
            // TODO child action
        }
    }
}

Vue JS 2.0子组件安装回调

4 个答案: