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

Logo

前往低代码交流专区

更多推荐