vue3怎么接收props

在Vue 3中，有三种方式可以接收props。

第一种方式是在没有使用 `<script setup>` 的组件中，可以使用`props`选项来声明props。例如：

export default {
  props: ['foo'],
  setup(props) {
    console.log(props.foo)
  }
}

这种方式与Vue 2一致。在`setup()`函数中，可以通过参数`props`来访问传递给组件的props。

第二种方式是使用一个对象来绑定多个props。可以通过`defineProps`函数来定义props的类型和其他属性。例如：

const props = defineProps({
  id: Number,
  title: { type: String, required: true }
})

然后可以通过`v-bind`来传递props给子组件。例如：

<component-one v-bind="post"></component-one>

这相当于直接传递props，相当于`<component-one :id="post.id" :title="post.title"></component-one>`。在子组件中，可以直接使用props的数据。

第三种方式是在子组件中使用`props`配置项声明接收props。在子组件的`props`选项中声明需要接收的props。例如：

export default {
  name: "Children",
  props: ["name"],
};

然后在子组件的模板中，可以使用父组件传递过来的props数据。例如：

<template>
  <div class="demo1">
    <h1>这是子组件</h1>
    <h2>父组件传递过来的数据：{{ name }}</h2>
  </div>
</template>

这三种方式都可以用来接收props数据。