Nuxt 3子组件如何通过defineProps接收父组件传递的Props

首先修正父组件的两处小问题：

• v:bind={review} 应该改为 :review="review"（或 v-bind="{ review }"），确保正确将单个review对象作为props传递给子组件
• :key="venuceReview.id" 变量名错误，需改为 :key="review._id"，因为循环变量是review

修正后的父组件代码：

<div v-for="review in reviews" :key="review._id">
  <ReviewsReview :review="review" />
</div>

接下来是子组件接收props的几种方式：

方式一：基础接收（快速开发场景） #

直接声明要接收的props名称即可：

<script setup>
import ReviewStyles from "./review.module.css"
// 声明接收名为review的props
const props = defineProps(['review'])

// 使用示例：在模板或脚本中访问 props.review.comment、props.review.score 等属性
</script>

方式二：带类型校验的规范写法（推荐） #

为提升代码健壮性，可指定props的类型、是否必填，甚至自定义结构校验规则：

<script setup>
import ReviewStyles from "./review.module.css"
const props = defineProps({
  review: {
    type: Object,
    required: true, // 强制父组件必须传递该props
    // 可选：添加自定义校验，确保review包含所有必要字段
    validator: (value) => {
      return ['_id', 'author', 'user', 'comment', 'score', 'date'].every(key => key in value)
    }
  }
})

// 使用示例：console.log(props.review.date)
</script>

方式三：TypeScript类型定义（TS项目场景） #

如果项目基于TypeScript，可通过接口定义review结构，获得完整的类型提示：

<script setup lang="ts">
import ReviewStyles from "./review.module.css"

interface Review {
  _id: string
  author: number
  user: number
  comment: string
  score: number
  date: string
}

// 通过泛型指定props的类型
const props = defineProps<{
  review: Review
}>()
</script>

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