Nuxt3中如何通过字符串参数动态更新组件变量？

Options API 写法 #

你当前代码里的this.btn = false是把参数名btn当成了属性名，而非传入的字符串对应的变量。要通过字符串修改响应式变量，直接用方括号语法即可——Vue Options API的实例属性都挂载在this对象上，方括号可以通过字符串值访问对应属性：

mouseLeaveMenu(btn) {
    // 清理之前的定时器，避免重复触发
    if (this.menuTimer) clearTimeout(this.menuTimer);
    
    this.menuTimer = setTimeout(() => {
        if (!this.mouseOverMenu) {
            this[btn] = false; // 用方括号访问字符串对应的变量
        }
    }, 1000);
}

组件中需要提前声明存储定时器ID的变量：

export default {
    data() {
        return {
            mouseOverMenu: false,
            productsHover: true,
            menuTimer: null // 新增定时器变量
        }
    },
    methods: {
        mouseLeaveMenu
    }
}

Composition API 写法（Nuxt3推荐） #

如果组件用<script setup>编写，响应式变量用ref或reactive声明，处理方式如下：

统一用reactive管理变量 #

把需要控制的hover变量放到一个reactive对象中，通过字符串访问更直接：

<script setup>
import { ref, reactive } from 'vue';

const mouseOverMenu = ref(false);
const menuStates = reactive({
    productsHover: true,
    ordersHover: true,
    // 其他需要控制的变量
});
let menuTimer = null;

const mouseLeaveMenu = (btn) => {
    if (menuTimer) clearTimeout(menuTimer);
    
    menuTimer = setTimeout(() => {
        if (!mouseOverMenu.value) {
            menuStates[btn] = false; // 直接通过字符串修改reactive对象属性
        }
    }, 1000);
}
</script>

<template>
    <div @mouseleave="mouseLeaveMenu('productsHover')">...</div>
</template>

关键注意点 #

• 方括号访问属性是JavaScript基础特性，Vue响应式系统完全支持，无需为每个变量单独写判断
• 必须清理重复定时器，防止用户快速移入移出时出现延迟触发的异常情况
• Composition API下统一用reactive管理同类型变量，更便于维护和批量操作

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