Vue.js 报错速查：Property or method “xxx” is not defined

—— 从爆红到秒修，一张图看懂所有坑

当你在控制台看到：

[Vue warn]: Property or method "xxx" is not defined on the instance but referenced during render.

其实就是 Vue 在告诉你：
“模板里用了 xxx，但实例里找不到它。”
99% 都是下面 5 类低级错误。按图索骥，2 分钟解决。

---

🔍 一图速查（保存备用）

模板引用	缺失环节	修复代码
{{ foo }}	data 里没有 foo	data: () => ({ foo: '' })
@click="bar"	methods 里没有 bar	methods: { bar() {} }
:title="baz"	computed 里没有 baz	computed: { baz() {} }
v-model="qux"	props 没定义 / 没 emit	props: ['qux'] + emit: ['update:qux']
<script setup>	变量没 return / 没 defineExpose	直接声明即可

---

🚑 具体场景 & 急救代码

1. 选项式 API：忘写 data / methods

<template>
  <p>{{ msg }}</p>   <!-- ❌ msg 未定义 -->
</template>

<script>
export default {
  // ✅ 补上 data
  data: () => ({ msg: 'Hello Vue' })
}
</script>

---

2. <script setup> 中变量未声明

<template>
  <button @click="handleClick">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)           // ✅ 声明变量
const handleClick = () => count.value++
</script>

---

3. 使用 props 但父组件没传

<!-- Child.vue -->
<template>
  <span>{{ title }}</span>
</template>
<script setup>
// 父组件没传 title 时会报错
defineProps({ title: String })
</script>

父组件修复：

<Child title="Vue 3" />

---

4. 用计算属性却写错名字

<template>
  <p>{{ totalPrice }}</p>   <!-- ❌ 拼写或大小写不一致 -->
</template>
<script setup>
const totalPrice = computed(() => ... ) // ✅ 保持一致
</script>

---

5. 事件方法未定义

<template>
  <button @click="add">+</button>
</template>
<script setup>
const add = () => { /* ... */ } // ✅ 声明即可
</script>

---

✅ 排查顺序（30 秒完成）

1. 看控制台行号 → 直接定位模板位置。
2. 检查拼写、大小写 → 90% 问题秒修。
3. 确认变量存在 → data / props / computed / methods / setup。
4. 确认父组件传参 → 如果是 props。

---

🎯 一句话总结

模板里用到的每个变量，都必须「在实例里声明过」。
按「拼写 → 作用域 → 传参」三步走，报错立即消失。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《Vue.js 3企业级项目开发实战（微课视频版》