Vue 父组件如何监听子组件的生命周期
时间:2022-07-26
本文章向大家介绍Vue 父组件如何监听子组件的生命周期,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、通过 $emit 实现
这里以 mounted 为例,在父组件 Parent 和子组件 Child 中,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
以上方法虽然可行,但每次都需要手动写一次 $emit 触发父组件的事件 更简单的方式可以在父组件引用子组件时通过 @hook 来监听生命周期
二、通过 @hook 实现
还是父组件 Parent 和子组件 Child,@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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用XtraBackup备份MySQL 8.0 Part 5 对全备份进行恢复
- LeetCode题目32:最长的有效括号
- C++ 万字长文第二篇---拿下字节面试
- mysqldump命令详解 Part 9 --hex-blob 参数的使用
- 使用XtraBackup备份MySQL 8.0 Part 2 XtraBackup权限及配置
- 使用XtraBackup备份MySQL 8.0 Part 6 对数据库进行增量备份
- ArrayList源码阅读笔记
- 3分钟短文 | Laravel表单验证没规则可用?你试试自定义,真香!
- 【C#】DataGridView 数据绑定的一些细节
- 3分钟短文 | Laravel 查询结果检查是不是空,5个方法你别用错!
- 使用XtraBackup备份MySQL 8.0 Part 7 对增量备份进行恢复
- 3分钟短文 | Laravel 日志全程记录 SQL 查询语句,要改写底层?
- MySQL InnoDB表空间加密
- 微信小程序自动化测试最佳实践(附 Python 源码)
- 3分钟短文 | MySQL在分组时,把多列合并为一个字段!