本文详解 vue 3 `<script setup>` 中因 props 命名冲突导致子组件模板无法渲染对象属性的根本原因，并提供规范、可复用的修复方案与最佳实践。</script>
在 Vue 3 的组合式 API 中，defineProps() 是声明组件接收外部属性的核心机制。但一个常见却极易被忽视的逻辑错误是：在 <script setup> 中将 defineProps() 的返回值赋给一个与 prop 名同名的变量（如 const film = defineProps({ film: {...} })）</script>。这会导致 film 变量本身成为整个 props 对象，而其内部的 film 属性反而被“遮蔽”——即 film.title 实际访问的是 props.film.title，但此时 film 已不是原始数据对象，而是 props 容器，从而引发模板中 {{ film.title }} 报错或渲染为空。
✅ 正确做法：统一使用 props 作为 props 对象标识符
修改 FilmComp.vue 的 <script setup> 部分如下：</script>
<script setup>
const props = defineProps({
film: {
type: Object,
required: true,
default: () => ({})
}
})
</script>✅ 关键点说明：
- props 是约定俗成、语义清晰的变量名，99% 的 Vue 项目都采用此命名，避免歧义；
- 模板中仍直接使用 {{ film.title }}、:src="film.imgSrc" 等语法——Vue 会自动从 props 对象中解构并暴露所有 prop 名为顶层变量（即“模板自动解构”），无需写 props.film.title；
- 若需在 <script> 中操作该对象（如日志调试、计算衍生值、校验等），则必须通过 props.film 访问： <pre class="brush:php;toolbar:false;">console.log('当前影片:', props.film.title) const isRecent = props.film.year > 2010</pre></script>
❌ 错误示例（问题根源）
// ❌ 危险！创建了同名变量，造成作用域污染
const film = defineProps({ film: { type: Object, required: true } })
// 此时 film === { film: { ... } }，而非预期的 { title, year, ... }
// 模板中 {{ film.title }} 实际尝试访问 undefined.title → 渲染失败? 补充优化建议
-
添加类型提示（推荐 TypeScript 或 JSDoc）
提升开发体验与安全性：// FilmComp.vue —— 使用 TypeScript 类型 interface Film { id: number title: string year: number genre: string imgSrc: string } const props = defineProps<{ film: Film }>() -
Prop 校验增强（可选）
确保传入对象结构完整：const props = defineProps({ film: { type: Object as PropType<Film>, required: true, validator: (v: Film) => v.id && v.title && v.imgSrc // 自定义校验 } }) ListFilms.vue 无需改动
你当前的列表组件写法完全正确：会将每个数组项作为 film prop 传入，只要子组件 FilmComp.vue 正确定义并消费 props，即可正常渲染。
✅ 最终验证效果
修复后，FilmComp.vue 模板中的以下绑定将全部生效：
立即学习“前端免费学习笔记（深入）”；
<img :src="film.imgSrc" alt="profile-picture" />
<h4>{{ film.title }}</h4>
<p>{{ film.genre }}</p>
<div>{{ film.year }}</div>? 总结：Vue 的 defineProps() 返回的是一个响应式 props 对象，切勿用 prop 名（如 film）作为接收变量名。始终使用语义明确的 props 变量接收，并依赖 Vue 的模板自动解构能力——这是组合式 API 下最清晰、最健壮、也最符合社区规范的实践方式。
