首先在项目的入口App.vue中使用watch对路由route进行判断,当路由不是指定的"Dashboard"路由时执行事件触发,关闭定时任务:
watch: {
$route: {
handler (newValue) {
if (newValue.name != "Dashboard") {
events.$emit('clearInterval')
}
},
immediate: true
}
}
其中执行定时任务的setInterval和关闭定时任务的clearInterval方法写在Dashboard这个页面中:
mounted () {
events.$on('clearInterval', val => {
clearInterval(this.interval)
})
clearInterval(this.interval)
this.init()
this.interval = setInterval(() => {
this.init()
}, 60000)
},
methods: {
由上面可以看出,在这个页面下,每60s执行一次定时任务,当路由不在Dashboard时,关闭定时任务。
——————————————————————
父子组件之间事件触发可以使用$emit:
触发的方法使用:
events.$emit('方法名', 传参) // $emit绑定一个自定义事件event ,当该语句被执行到的时候,会将参数抛出传递给父组件,父组件通过@event监听并接收参数,然后可通过$event访问到子组件抛出的参数
监听执行的方法使用:
events.$on('方法名', val => {
})