Vue 3 中子组件无法访问父组件传递的对象属性的解决方案

本文详解 vue 3 `

在 vue 3 的组合式 API 中，defineProps() 是声明组件接收外部属性的核心机制。但一个常见却极易被忽视的逻辑错误是：在 。这会导致 film 变量本身成为整个 props 对象，而其内部的 film 属性反而被“遮蔽”——即 film.title 实际访问的是 props.film.title，但此时 film 已不是原始数据对象，而是 props 容器，从而引发模板中 {{ film.title }} 报错或渲染为空。

✅ 正确做法：统一使用 props 作为 props 对象标识符

修改 FilmComp.vue 的

✅ 关键点说明：

• props 是约定俗成、语义清晰的变量名，99% 的 Vue 项目都采用此命名，避免歧义；
• 模板中仍直接使用 {{ film.title }}、:src=”film.imgSrc” 等语法——Vue 会自动从 props 对象中解构并暴露所有 prop 名为顶层变量（即“模板自动解构”），无需写 props.film.title；
• 若需在

❌ 错误示例（问题根源）

// ❌ 危险！创建了同名变量，造成作用域污染 const film = defineProps({ film: { type: Object, required: true } }) // 此时 film === { film: { ... } }，而非预期的 { title, year, ... } // 模板中 {{ film.title }} 实际尝试访问 undefined.title → 渲染失败

? 补充优化建议

1. 添加类型提示（推荐 typescript 或 jsDoc）
   提升开发体验与安全性：

   // FilmComp.vue —— 使用 TypeScript 类型 interface Film {   id: number   title: string   year: number   genre: string   imgSrc: string }  const props = defineProps<{   film: Film }>()

2. Prop 校验增强（可选）
   确保传入对象结构完整：

   const props = defineProps({   film: {     type: Object as PropType,     required: true,     validator: (v: Film) => v.id && v.title && v.imgSrc // 自定义校验   } })

3. ListFilms.vue 无需改动
   你当前的列表组件写法完全正确： 会将每个数组项作为 film prop 传入，只要子组件 FilmComp.vue 正确定义并消费 props，即可正常渲染。

✅ 最终验证效果

修复后，FilmComp.vue 模板中的以下绑定将全部生效：

立即学习“前端免费学习笔记（深入）”；

@@##@@ 
{{ film.title }}
 
{{ film.genre }}
 
{{ film.year }}

? 总结：Vue 的 defineProps() 返回的是一个响应式 props 对象，切勿用 prop 名（如 film）作为接收变量名。始终使用语义明确的 props 变量接收，并依赖 Vue 的模板自动解构能力——这是组合式 API 下最清晰、最健壮、也最符合社区规范的实践方式。