Vue深入组件：Props 详解1

Props 是组件之间传递数据的主要方式，父组件通过 props 向子组件传递数据，子组件则需要显式声明接收的 props。本章将从 props 的声明、使用、传递规则到校验等方面，全面解析 Vue 中的 props 机制。

Props 声明

子组件必须显式声明它所接受的 props，这样 Vue 才能区分传入的是 props 还是透传 attribute（透传 attribute 指未被组件声明为 props 的属性，将在后续章节专门讨论）。根据组件是否使用 <script setup>，声明方式有所不同。

基础声明方式

1. 使用 <script setup> 时：defineProps() 宏

在 <script setup> 中，Vue 提供了 defineProps() 宏来声明 props，无需导入即可直接使用。声明后会返回一个包含 props 数据的响应式对象。

<script setup>
// 以字符串数组形式声明：接收名为 "foo" 的 prop
const props = defineProps(['foo'])// 访问 prop 的值
console.log(props.foo)
</script>
<