Vue3 Composition API调用函数时出现‘quizz is not defined’错误求助

问题原因 #

在Vue3的<script setup>语法中，defineProps返回的是包含所有props的对象，模板会自动解构props的属性供直接使用，但脚本内部无法直接访问quizz变量，必须通过返回的props对象获取，或者显式解构出quizz。

两种解决方式 #

方式1：解构props获取quizz变量

直接从defineProps的返回值中解构出quizz，这样脚本里就能像模板一样直接使用quizz：

<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// 解构props，单独获取quizz变量
const { quizz } = defineProps(["quizz"]);

const navigateToQuiz = () => {
  router.push(`/quizz/${quizz.id}`);
};
</script>
<template>
  <div class="card" @click="navigateToQuiz">
    <img :src="quizz.img" :alt="quizz.name" />
    <div class="card-text">
      <h2>{{ quizz.name }}</h2>
      <p>{{ quizz.questions.length }} questions</p>
    </div>
  </div>
</template>

方式2：通过props对象访问quizz

如果不想解构，直接在函数里通过props.quizz访问即可：

<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps(["quizz"]);

const navigateToQuiz = () => {
  // 从props对象中获取quizz
  router.push(`/quizz/${props.quizz.id}`);
};
</script>
<template>
  <div class="card" @click="navigateToQuiz">
    <img :src="quizz.img" :alt="quizz.name" />
    <div class="card-text">
      <h2>{{ quizz.name }}</h2>
      <p>{{ quizz.questions.length }} questions</p>
    </div>
  </div>
</template>

为什么模板里能直接用quizz？ #

Vue3对<script setup>的模板做了语法糖优化，会自动将props的属性暴露给模板上下文，所以模板里可以直接写quizz，但脚本内部没有这个自动处理，必须显式从props对象中获取属性。

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