专栏首页云前端[译] 监听第三方 Vue 组件的生命周期钩子

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

原文:https://vuedose.tips/listen-to-lifecycle-hooks-on-third-party-vue-js-components/

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

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

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

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

<Child @mounted="doSomething"/>

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

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

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

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

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

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 复用 Vue 组件的 6 层手段

    原文:https://michaelnthiessen.com/6-levels-of-reusability/?cksubscriberid=68763622...

    江米小枣
  • [译] 一张图弄明白 Vuex 里该存放什么样的数据

    大多数人刚上手 Vuex 的时候,首先都想知道,应该往其中存放什么样的数据呢?在对这个问题给出答案的过程中,很多人(包括我)先是来到了“一股脑放进去”的阶段。但...

    江米小枣
  • [译] 更可靠的 React 组件:提纯

    原文摘自:https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-c...

    江米小枣
  • Go template高级用法、深入详解、手册、指南、剖析

    以下为test.html文件的内容,里面使用了一个template语法{{.}}。

    sunsky
  • Android ndk编译FFMPEG/IJKPlayer报错 `ndk missing -D__STDC_CONSTANT_MACROS` 解决办法

    望天
  • 同步只会用synchronized?如果你没用过它,面试就等着挨虐吧

    强子:哎,都怪我平时心浮气躁,知识掌握不牢固,有些知识是平时不太常用的,但是面试的时候却极容易问到,比如ArrayList、HashMap这些容器的内部实现。还...

    IT大咖说
  • 【Oozie】Hadoop调度框架介绍及工作流调度框架Oozie概述

    版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/...

    魏晓蕾
  • 经典面试题-请举例解释@Required annotation?

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • 快速学习-Oozie简介

    Oozie英文翻译为:驯象人。一个基于工作流引擎的开源框架,由Cloudera公司贡献给Apache,提供对Hadoop MapReduce、Pig Jobs的...

    cwl_java
  • MySQL中UTF8编码的数据在cmd下乱码

    其实,原因是cmd用gbk的格式来显示数据,那么我们只需要将utf-8存储的数据用gbk的格式输出到cmd即可。

    ydymz

扫码关注云+社区

领取腾讯云代金券