vue父组件监听子组件数据更新(hook)
this.$on(‘hook : 生命周期钩子’, () => {})
可以监听执行生命周期钩子,适用场合如:
data(){
return {
itemID:,
}
}
mounted(){
// 设置定时器
this.itemID = setInterval(()=> {
console.log(开计时器) }, 1000);
// 离开页面时清除定时器
this.$once(hook:beforeDestroy, ()=> {
clearInterval(this.itemID) })
}
将定时器和清除定时器放在一起,功能和写在beforeDestroy生命周期中是一样滴,这样维护起来比较方便 ~ 定时器里放需要定时请求的数据,然后离开页面就清除定时器,也就停止请求
@hook:生命周期钩子=“触发的函数”
父组件监听子组件数据更新,也就是监听生命周期 ~
来人! 上代码 !
// 父组件
<template>
<div class="father">
<son @hook:update="sonUpdateFun"/> // 我是子组件
</div>
</template>
<script>
import son from ./son.vue
export default {
components:{
son },
methods:{
sonUpdateFun(){
console.log("子组件的数据更新啦~~~")
}
}
}
</script>
当子组件的数据更新的时候就会触发函数 sonUpdateFun,就可以进行一些不可描述的操作了 (๑¯∀¯๑)
PS:有错误还请指出 ~
