Vue3组件setup()方法中如何访问methods内的函数？

问题根源 #

Vue3中，组合式API的setup()函数作用域与选项式API的methods完全隔离，setup内部无法直接访问methods里定义的函数，这就是调用storeAnswer()时报错的核心原因。同时代码还存在隐性问题：methods里的this.selectedAns并未指向setup中用ref定义的响应式变量，按钮点击的赋值操作不会真正更新视图。

推荐解决方案：统一使用组合式API重构 #

将storeAnswer函数移至setup内部，保持代码风格一致，彻底解决作用域隔离问题，修改后的QuestionCard.vue代码如下：

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    name: String,
    question: String,
    answer_options: Array,
  },
  setup(props) {
    const selectedAns = ref(null);
    
    // 将storeAnswer移至setup内部
    const storeAnswer = (ans: any) => { 
      selectedAns.value = ans;
      console.log("Button clicked: " + ans);
    }

    // 为选项分配对应键盘按键
    const keyOptions: {keyCode: string, value: any}[] = [];
    for (let i = 0; i < props.answer_options.length; i++) {
      keyOptions.push({
        keyCode: String.fromCharCode(65 + i),
        value: props.answer_options[i]
      });
    }

    window.addEventListener("keyup", (event) => {
      const keyPressed = event.key.toUpperCase();
      const matchedOption = keyOptions.find(opt => opt.keyCode === keyPressed);
      
      if (matchedOption) {            
        storeAnswer(matchedOption.value);
        console.log(`Option you selected is: ${keyPressed})${matchedOption.value}`)
      }
    });

    // 将storeAnswer返回给模板调用
    return {
      selectedAns,
      storeAnswer
    }
  },
});
</script>

<template>
  <div>
    <h4>{{ question }}</h4>
    <div>
      <ul>
        <li v-for="(option, index) in answer_options" :key="index">
          <button @click="storeAnswer(option)">
            {{ String.fromCharCode(65 + index) + ') ' + option }}
          </button>
        </li>
      </ul>
    </div>

    <!-- 展示选中的答案 -->
    <p>{{ selectedAns }}</p>
  </div>
</template>

优化说明 #

• 移除选项式methods，统一使用组合式API，避免作用域混淆；
• 键盘监听逻辑直接调用setup内的storeAnswer，与按钮点击逻辑保持一致；
• 使用find替代findIndex直接获取匹配选项，代码更简洁；
• 将storeAnswer返回给模板，确保按钮点击能正常调用。

临时兼容方案（不推荐） #

若暂时不想重构代码，可通过getCurrentInstance获取组件实例访问methods，但该写法不符合Vue3最佳实践：

<script lang="ts">
import { defineComponent, ref, getCurrentInstance } from 'vue'

export default defineComponent({
  props: {
    name: String,
    question: String,
    answer_options: Array,
  },
  data() {
    return {
      selectedAns: null
    }
  },
  methods: {
    storeAnswer(ans: any) { 
      this.selectedAns = ans;
      console.log("Button clicked: " + ans);
    }
  },
  setup(props) {
    const instance = getCurrentInstance();
    
    const keyOptions: {keyCode: string, value: any}[] = [];
    for (let i = 0; i < props.answer_options.length; i++) {
      keyOptions.push({
        keyCode: String.fromCharCode(65 + i),
        value: props.answer_options[i]
      });
    }

    window.addEventListener("keyup", (event) => {
      const keyPressed = event.key.toUpperCase();
      const matchedOption = keyOptions.find(opt => opt.keyCode === keyPressed);
      
      if (matchedOption) {            
        instance?.proxy?.storeAnswer(matchedOption.value);
        console.log(`Option you selected is: ${keyPressed})${matchedOption.value}`)
      }
    });
  },
});
</script>

内容的提问来源于stack exchange，提问作者sweet-pineapple