如何在 Nuxt 3 的子组件中接收 props

Question

我在网上搜索了很多地方，但似乎无法在任何地方找到明确且直截了当的答案。给定父组件中的这个循环以输出子组件列表，我将一个对象作为道具发送到这样的子组件

<div v-for="review in reviews">
  <ReviewsReview v:bind={review} :key="venuceReview.id" />
</div>

每个都review Object将采用这种格式

{
 "_id": "58c03ac18060197ca0b52d51",
 "author":  3,
 "user":  2,
 "comment": "I tried this place last week and it was incredible! Amazing selection of local and imported brews and the food is to die for! ",
 "score": 5,
 "date": "2017-03-08T17:09:21.627Z"
}

我的问题是如何使用此处检索子组件中的道具defineProps()：

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

const props = defineProps()
</script>

提前致谢

Answer 1

从父组件，您可以将一些值传递给子组件，使用冒号后跟要在子组件中访问的名称。

在父组件上，说pages/index.vue：

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

在本例中，我们将每个review对象传递给名为 的子对象review。

在名为 的子组件上components/singleReview.vue：

<script setup>
const props = defineProps({
  review: {
    type: Object,
    required: true,
  },
});
const { review } = props;
</script>

我们review使用相同的名称访问子组件中的每个道具。

查看工作复制