【译】Vue实用笔记(十):监听第三方组件的声明周期函数

这个牛逼的技巧是我从我滴朋友Damian Dulisz那学来的,他是Vue.js的团队的核心成员,他创建了官方的 Vue newslettervue-multiselect

有时候我们需要知道一个组件什么时候被父组件创建、绑定或者更新,尤其是当为vanilla JS 库编写组件时。

你可能已经在你的组件中使用过上述功能,例如在子组件的生命周期函数中出发一个生命周期函数:

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

然后,你会在一个这样的父组件<Child @mounted="doSomething"/>中监听自组件触发的事件。

然鹅:其实没有必要这样做(颠覆三观了吧),而且你也无法在第三方组件中做这种事情(因为人家都封装好了,我们只是引用)。

取而代之的是一个灰常简单的解决方案是,加一个@hook:前缀。

例如,当第三方组件 v-runtime-template渲染时,你可以监听他的updated生命周期函数来处理一些你想做的东西:

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

还不能相信这个事实吗?实际操作一把CodeSandbox

Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!

See you next week.

Alex

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容