Vue父组件函数如何实现定时自动调用？父子组件传值场景

要实现checkStatus函数每秒自动调用，你需要借助Vue的生命周期钩子和JavaScript的setInterval定时器，同时注意组件卸载时清除定时器避免内存泄漏。以下是修正后的完整代码：

父组件（修正后） #

<template>
  <Dialog :msg="message" />
</template>

<script>
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import Dialog from './Dialog.vue'; // 确保正确引入子组件

export default defineComponent({
  components: { Dialog },
  setup() {
    const message = ref({
      text: '',
    });
    let timer = null;

    const checkStatus = (/* 这里传入你的变量 */) => {
      // 这里可以添加实际的数据获取和计算逻辑
      message.value.text = `Loading... ${new Date().toLocaleTimeString()}`;
    };

    onMounted(() => {
      // 组件挂载后启动定时器，每秒调用一次checkStatus
      timer = setInterval(() => {
        checkStatus(/* 传入需要的变量 */);
      }, 1000);
    });

    onUnmounted(() => {
      // 组件卸载时清除定时器，防止内存泄漏
      clearInterval(timer);
    });

    return {
      message,
      checkStatus
    };
  }
});
</script>

子组件（无需修改） #

<template>
  <h3>{{ msg.text }}</h3>
</template>

<script>
export default defineComponent({
  props: ['msg']
});
</script>

关键说明 #

• 定时器的创建与销毁：在onMounted中初始化setInterval，确保组件挂载后才开始定时任务；在onUnmounted中调用clearInterval清除定时器，避免组件卸载后定时器仍在运行导致的内存泄漏。
• 修正组件写法：原父组件的defineComponent结构有误，Vue3中需要将响应式变量和方法放在setup函数内部，并通过return暴露给模板使用。
• 数据更新：checkStatus函数中修改message.value.text后，由于message是响应式变量，子组件会自动接收到更新后的msg props并重新渲染。

内容的提问来源于stack exchange，提问作者Alex Dalen