Vue父组件监听子组件生命周期


Posted in Javascript onSeptember 03, 2020

比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
 this.$emit("mounted");
}

以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示:

// Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
  console.log('父组件监听到 mounted 钩子函数 ...');
},

// Child.vue
mounted(){
  console.log('子组件触发 mounted 钩子函数 ...');
},  

// 以上输出顺序为:
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...

当然 @hook 方法不仅仅是可以监听 mounted,其它的生命周期事件,例如:created,updated 等都可以监听。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript二维数组转置实例
Jan 22 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
JavaScript 几种循环方式以及模块化的总结
Sep 03 #Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 #Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 #Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 #Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 #Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 #Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 #Javascript
You might like
php+javascript的日历控件
2009/11/19 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
Laravel find in set排序实例
2019/10/09 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python实现的rsa加密算法详解
2018/01/24 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python如何爬取动态网站
2020/09/09 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
后勤岗位职责
2013/11/26 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
经营管理策划方案
2014/05/22 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
运动会表扬稿范文
2015/05/05 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
Moment的feature导致线上bug解决分析
2022/09/23 Javascript