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:有错误还请指出 ~

经验分享 程序员 微信小程序 职场和发展