Vue2中父组件通过ref调用setInterval后如何用clearInterval停止？

你的问题核心是子组件的stopTimer无法正常清除通过父组件启动的定时器，主要有几个关键问题需要修复：

1. 未定义且未正确调用定时器内的方法 #

原代码中doSomethingEveryTwoSeconds()既没有在子组件中定义，也没有通过this.调用组件实例的方法，这会导致定时器每次触发时抛出错误，干扰定时器的正常运行。

2. 未处理重复启动定时器的情况 #

如果多次点击父组件的“Start Timer”按钮，会创建多个定时器实例，但timer只会保存最后一个的引用，此时stopTimer只能清除最后一个，旧的定时器会继续运行，让你误以为停止操作无效。

3. 清除定时器后未重置timer引用 #

清除定时器后不把timer设为null，可能导致后续判断逻辑出错，比如重复清除时的无效操作。

修改后的子组件代码 #

<template>
    <button @click="stopTimer">Stop Timer</button>
</template>
<script>
export default {
    methods: {
        startTimerInChild() {
            // 启动新定时器前先清除已有定时器
            if (this.timer) {
                clearInterval(this.timer);
            }
            this.timer = setInterval(() => {
                // 正确调用组件内的方法
                this.doSomethingEveryTwoSeconds();
            }, 2000);
        },
        stopTimer() {
            // 调试时可以查看timer值，确认是否获取到正确的定时器引用
            // console.log('当前定时器引用:', this.timer);
            if (this.timer) {
                clearInterval(this.timer);
                // 清除后重置timer，避免后续误操作
                this.timer = null;
            }
        },
        // 定义定时器要执行的方法
        doSomethingEveryTwoSeconds() {
            console.log('定时器执行中...');
            // 这里替换成你的实际业务逻辑
        }
    },
    data() {
        return {
            timer: null
        }    
    },
    // 组件销毁时自动清除定时器，防止内存泄漏
    beforeDestroy() {
        this.stopTimer();
    }
}
</script>

额外说明 #

• Vue2版本不会对这个逻辑产生影响，核心问题是代码中的方法调用和定时器管理逻辑漏洞。
• 箭头函数在这里的使用是没问题的，它能确保setInterval回调内的this指向子组件实例，不需要修改。

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