在 Vue Options API 中，子组件通过 props 选项接收父组件传入的数据，支持数组或对象形式声明，其中对象写法可校验类型、设默认值、标识必填；props 挂载于 this 上，只读不可修改，模板中直接使用，父组件需用 v-bind 动态绑定或静态传值。
在 Vue Options API 中，子组件通过 props 选项 接收父组件传入的数据，这是最基础、最标准的单向数据流方式。核心就是声明接收哪些属性、它们的类型和约束，并在模板或逻辑中直接使用。
声明 props：用对象或数组形式
子组件的 export default 配置中需定义 props 选项：
-
数组写法：适合简单场景，只声明 prop 名称，不校验类型或必填性
props: ['title', 'disabled', 'userList'] -
对象写法（推荐）：支持类型检查、默认值、必填标识和自定义校验
props: {<br> title: { type: String, required: true },<br> count: { type: Number, default: 0 },<br> tags: { type: Array, default: () => [] },<br> onSubmit: { type: Function }<br>}
在模板中直接使用 props 数据
声明后，props 属性会自动挂载到组件实例上，可在模板中像普通 data 一样直接插值或绑定：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
{{ title }}显示字符串 -
:class="{ active: disabled }"绑定布尔值 -
v-for="item in userList"遍历数组
在 JavaScript 逻辑中访问 props
Options API 下，props 不是响应式代理，而是直接挂在 this 上：
立即学习“前端免费学习笔记（深入）”；
-
this.title获取字符串 prop -
this.$data不包含 props，props 是独立于 data 的顶层属性 - 不能直接修改
this.title = 'new'—— props 是只读的，修改会触发警告
父组件如何正确传值
父组件调用子组件时，用 v-bind:（或简写 :）绑定数据：
-
<MyCard :title="pageTitle" :user-list="users" />→ 动态绑定响应式数据 -
<MyCard title="首页" />→ 静态字符串（注意：此时值是字符串字面量，不是变量） - 若子组件 props 声明为
required: true，父组件未传该 prop 会报 warning
