vue 动态组件何时加载完毕

joeyFuck
  • 42

问题描述

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

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

应该如何做合适,求解.

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

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

但这样总归不够优雅.

回复
阅读 4.8k
4 个回答
✓ 已被采纳

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

子组件中mounted中不就可以么

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

宣传栏