该系列记录为实际项目过程中所遇到的问题,好记性不如烂笔头!!!
在一些场景中,我需要在父组件上知道子组件什么时候被创建、挂载或者是更新,通常都是在子组件的生命周期的钩子函数中,触发事件,就像这样:
mounted() {
this.$emit("mounted");
}
然后就可以在父组件上这样做:<Child @mounted="doSomething"/>。
但是实际上没有必要这样实现;更何况在面对第三方组件时,比如说Element UI相关组件也没办法这样实现。取而代之的方法是,通过使用 @hook: 前缀监听生命周期中的钩子,并指定回调函数。举个例子,如果你想要在第三方组件 v-runtime-template 渲染时做一些事情,那么你可以监听它的生命周期中的 updated 钩子:
<v-runtime-template @hook:updated="doSomething" :template="template" />
转载自:https://juejin.cn/post/6844903799656562695