[译] 监听第三方 Vue 组件的生命周期钩子

简介: [译] 监听第三方 Vue 组件的生命周期钩子

原文:vuedose.tips/listen-to-l…

在某些情况下,开发者需要在父组件中了解一个子组件何时被创建、挂载或更新。

你可能也在自己的组件中遇到并解决过类似问题,比如,通过在子组件的生命周期钩子中 emit 一个事件,像这样:


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

然后就可以在父组件中监听到:


<Child @mounted="doSomething"/>

如果只是单纯的这样 emit 并监听,让我来告诉你吧:大可不必。

可以取而代之的办法是,只需要加上前缀 @hook: 来监听相应的生命周期钩子函数就可以了。

这个解决方法也适用于第三方组件。

比如,如果你要在第三方组件 v-runtime-template 渲染时监听其 updated 钩子,像这样就行:


<v-runtime-template 
    @hook:updated="doSomething" 
    :template="template" />


相关文章
|
4天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
5天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
17 2
|
4天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
9 0
|
4天前
|
缓存 JavaScript
Vue中的keep-alive是什么意思?以及如何使用
Vue中的keep-alive是什么意思?以及如何使用
|
11月前
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期
52 0
|
4月前
|
JavaScript 前端开发 开发者
vue实例、指令、生命周期
vue实例、指令、生命周期
51 1
|
4月前
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期
|
11月前
|
JavaScript
08Vue - Vue实例(实例生命周期)
08Vue - Vue实例(实例生命周期)
30 0
08Vue - Vue实例(实例生命周期)
|
12月前
|
JavaScript
vue实例的生命周期
vue实例的生命周期
30 0
|
JavaScript
Vue实例的生命周期详解,从创建到销毁全过程
Vue的生命周期一直以来都是重中之重,虽然在实际开发中经常用到的就几个,但是你对生命周期的掌握程度决定着你写的程序好不好,并且这一块也一直是面试Vue部分的重要考点。
319 0
Vue实例的生命周期详解,从创建到销毁全过程