Vue的学习总结自测（四）——v-model的原理，组件data为什么是一个函数，keep-alive,父组件监听子组件的生命周期

最新推荐文章于 2024-04-19 10:09:49 发布

linSeek

最新推荐文章于 2024-04-19 10:09:49 发布

阅读量539

点赞数 1

分类专栏： vue总结文章标签： Vue的学习总结自测（四） v-model的原理组件data函数 keep-alive 父组件监听子组件的生命周期

本文链接：https://blog.csdn.net/qq_42817747/article/details/101049892

版权

本文深入探讨Vue的高级概念，包括：如何通过@hook监听子组件生命周期，如mounted和updated；keep-alive组件的include、exclude属性及meta属性的应用；组件data必须为函数的原因，以保持数据隔离；以及v-model指令的实现原理，揭示其在不同输入元素上的工作方式。

摘要由CSDN通过智能技术生成

继上一篇：
Vue的学习总结自测（三）——computed 和 watch 的区别、vue不能检测到数组、对象的变动

本文目录：

父组件监听子组件的生命周期
keep-alive
组件中 data 为什么是一个函数？
v-model 的原理

11、父组件监听子组件的生命周期

比如有父组件 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 钩子函数