首页 >> js开发 >> jsVue父组件监听子组件生命周期js大全
jsVue父组件监听子组件生命周期js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:
// Parent.vue
// Child.vue
mounted() {
this.$emit("mounted");
}
// Parent.vue
// Child.vue
mounted() {
this.$emit("mounted");
}以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示:
// Parent.vue
doSomething() {
console.log('父组件监听到 mounted 钩子函数 ...');
},
// Child.vue
mounted(){
console.log('子组件触发 mounted 钩子函数 ...');
},
// 以上输出顺序为:
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...
// Parent.vue
doSomething() {
console.log('父组件监听到 mounted 钩子函数 ...');
},
// Child.vue
mounted(){
console.log('子组件触发 mounted 钩子函数 ...');
},
// 以上输出顺序为:
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...当然 @hook 方法不仅仅是可以监听 mounted,其它的生命周期事件,例如:created,updated 等都可以监听。以上就是本文的全部内容,希望对大家的学习有所帮助。
// Parent.vue
// Child.vue
mounted() {
this.$emit("mounted");
}
// Parent.vue
// Child.vue
mounted() {
this.$emit("mounted");
}以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示:
// Parent.vue
doSomething() {
console.log('父组件监听到 mounted 钩子函数 ...');
},
// Child.vue
mounted(){
console.log('子组件触发 mounted 钩子函数 ...');
},
// 以上输出顺序为:
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...
// Parent.vue
doSomething() {
console.log('父组件监听到 mounted 钩子函数 ...');
},
// Child.vue
mounted(){
console.log('子组件触发 mounted 钩子函数 ...');
},
// 以上输出顺序为:
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...当然 @hook 方法不仅仅是可以监听 mounted,其它的生命周期事件,例如:created,updated 等都可以监听。以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章:
- JavaScript如何将Node.js中的回调转换为Promise
- JavaScriptNode.js path模块,获取文件后缀名操作
- js解决Vue watch里调用方法的坑js大全
- js解决vue init webpack 下载依赖卡住不动的问题js大全
- jsvue-axios同时请求多个接口 等所有接口全部加载完成再处理操作js大全
- js在vue项目中promise解决回调地狱和并发请求的问题js大全
- jsEcharts在Taro微信小程序开发中的踩坑记录js大全
- jsvue 中的动态传参和query传参操作js大全
- js解决Vue大括号字符换行踩的坑js大全
- jsVue 防止短时间内连续点击后多次触发请求的操作js大全