Vue3组合式API中函数内使用emit失效问题求助

问题出在**defineEmits的使用位置错误**——它只能在<script setup>的顶层作用域声明，不能放在函数内部调用。

正确写法如下：

<script setup>
import { ref } from 'vue'

const timer = ref(null)
const reactionTime = ref(0)

// 在顶层作用域提前声明emit
const emit = defineEmits(["end"])

const stopTimer = () => {
  clearInterval(timer.value);
  // 直接调用已声明的emit触发事件
  emit("end", reactionTime.value);
};
</script>

原因说明 #

• defineEmits是Vue的编译宏，必须在<script setup>最外层使用，编译阶段会将其转换为组件的事件配置，函数内部调用无法被正确识别。
• 提前在顶层定义emit变量后，就能在任意函数中直接调用它来触发自定义事件。

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