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 相关文章推荐
用console.table()调试javascript
Sep 04 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
js实现随机点名小功能
Aug 17 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
PHP文件与目录操作示例
2016/12/24 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python网络编程详解
2017/10/31 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
经典c++面试题五
2014/12/17 面试题
幼儿园庆六一活动方案
2014/03/06 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
手写实现JS中的new
2021/11/07 Javascript