vue3 setinterval 发布订阅
时间: 2024-08-13 13:02:24 浏览: 75
在 Vue3 中,`setInterval` 和发布订阅模式(通常称为事件总线或Vuex)可以结合使用来实现实时数据更新和解耦组件之间的通信。`setInterval` 可以定期执行某个函数,而发布订阅则提供了一种机制让各个组件间传递消息。
当你需要在父组件中每隔一段时间执行某些操作,并将结果同步到子组件,可以这样做:
1. **创建事件总线** (Event Bus or Vuex Store):如果项目复杂度较高,推荐使用Vuex管理状态;对于简单场景,可以用自定义的事件中心,如 `const bus = new Vue()`。
2. **发布(emit)**:在父组件的定时器回调中,通过 `bus.$emit('intervalEvent', data)` 发送事件,这里的 'intervalEvent' 是自定义的事件名称,data 是要传递的数据。
3. **订阅(on)**:在子组件中,使用 `bus.$on('intervalEvent', handlerFn)` 注册接收这个事件的处理函数 `handlerFn(data)`。当接收到事件时,子组件会更新视图。
```javascript
// 父组件
import bus from '@/eventBus'
export default {
setup() {
const intervalId = setInterval(() => {
// 执行定时任务
const result = doSomething()
bus.$emit('intervalEvent', result)
}, 1000);
return () => clearInterval(intervalId); // 在组件卸载前取消定时器
}
}
// 子组件
setup() {
const handleResult = (data) => {
// 更新子组件的状态
updateComponentState(data)
};
bus.$on('intervalEvent', handleResult);
return {};
}
```
阅读全文