vue父组件监听子组件数据更新(hook)
昨日份新知识this.$on(‘hook : 生命周期钩子’, () => {})可以监听执行生命周期钩子,适用场合如:data(){return {itemID:'',}}mounted(){// 设置定时器this.itemID = setInterval(()=> { console.log('开计时器') }, 1000);// 离开页面时清除定时器this.$once('ho
·
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:有错误还请指出 ~
更多推荐
已为社区贡献2条内容
所有评论(0)