专栏名称: 程序猿何大叔
前端工程师
目录
相关文章推荐
前端之巅  ·  npm 够用吗?初创企业为何追捧这个 ... ·  2 天前  
前端早读课  ·  【图书】零基础开发AI ... ·  2 天前  
前端早读课  ·  【第3462期】7 分钟深度理解柯里化 ·  2 天前  
51好读  ›  专栏  ›  程序猿何大叔

【译】Vue 的小奇技(第十篇):监听第三方组件的生命周期钩子

程序猿何大叔  · 掘金  · 前端  · 2019-03-19 04:38

正文

阅读 740

【译】Vue 的小奇技(第十篇):监听第三方组件的生命周期钩子

特别声明:本文是作者 Alex Jover 发布在 VueDose 上的一个系列。

版权归作者所有。

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

为了不影响大家阅读,获得授权的记录会放在本文的最后。

正文

今天要讲的技巧是我以前从我朋友 Damian Dulisz 那里学来的。他是 Vue.js 核心团队的成员,就是那个官方新闻站点 Vue newsletter 的建设者,也还是 vue-multiselect 库的作者。

在一些场景中,我需要在父组件上知道子组件什么时候被创建、挂载或者是更新,特别是当为原生 js 库创建组件时。

你可能知道有一些方法可以在你自己的组件上,实现以上的需求。举个例子,通过在子组件的生命周期的钩子函数中,触发事件,就像这样:

mounted() {
  this.$emit("mounted");
}
复制代码

然后你就可以在父组件上这样做: <Child @mounted="doSomething"/>

我告诉你,没有必要这样实现;更何况实际上,你在面对第三方组件时,也办法这样实现。

取而代之的方法是,通过使用 @hook: 前缀监听生命周期中的钩子,并指定回调函数。

举个例子,如果你想要在第三方组件 v-runtime-template 渲染时做一些事情,那么你可以监听它的生命周期中的 updated 钩子:

<v-runtime-template @hook:updated="doSomething" :template="template" />
复制代码

不相信我吗?自己去 CodeSandbox 看看这个 例子 吧!







请到「今天看啥」查看全文