vue 动态组件何时加载完毕

Question

问题描述

想在动态组件dom渲染完后dosomething，未找到对应的钩子函数。

补充：我要做的操作需在父组件内完成。

应该如何做合适，求解.

 <component :id="item.id" :is="item.componentCode" />

最简单的方法就是弄个定时器，判断dom.item.id是否已存在，若已存在表面dom渲染完毕。

但这样总归不够优雅.

Answer 1

可能还有很多我没试过的实现方式，我个人觉得比较简单的是使用状态管理，父子组件之间的通信很难不通过子组件来触发。就比如 emit 事件，但这个可能不够优雅。使用状态管理是很便于组件间通信和共享数据的，子组件需要有一些改动。具体的做法大致是，在 store 里添加一个状态变量，数值为布尔值，然后定义好 actions，利用子组件里 mounted 和 destroyed 钩子调用 actions 改变状态，keep-alive 组件也有相应的钩子可以适配。然后在父组件里监听这个状态变量，然后去做相应的处理。由于是利用 Vue 本身的生命周期，所以一切都比较自然（如果怕以后方法变更时处理各个组件麻烦，还可以把钩子都抽取出来，在组件上注入，更加分离。）

Answer 2

子组件中mounted中不就可以么

Answer 3

$nextTick(),能否解决你的问题

Answer 4

请问问题解决了吗？我也遇到这个问题了