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 相关文章推荐
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
href下载文件根据id取url并下载
May 28 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
想用好React的你必须要知道的一些事情
Jul 24 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python tkinter实现界面切换的示例代码
2019/06/14 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
介绍信样本
2015/01/31 职场文书
2015年推普周活动方案
2015/05/06 职场文书
歌剧魅影观后感
2015/06/05 职场文书
2015年科普工作总结
2015/07/23 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
python 中yaml文件用法大全
2021/07/04 Python
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL