前端
组件属性Props
你可能会问
组件属性到底是什么？同一个组件，为什么在每个地方长得都不一样？
简单来说
父组件传给子组件的数据，用来配置组件的内容和行为。
Button.def
label待传入
variant待传入
label="加入购物车"加入购物车label="取消" ghost取消label="删除" dark删除01 · 先这样理解
把抽象概念放进真实场景
父组件传给子组件的数据，用来配置组件的内容和行为。
换个角度想Props 像咖啡店的点单小票：同一台咖啡机，小票上写大杯、少糖、加冰，做出来的就是那一杯。机器不用改，改的只是单子。
02 · 点击演示
同一个按钮，怎么被传成不同样子？
突出显示的部分，就是当前概念在整条流程中负责的位置。
label你扮演父组件：决定要传下去的值variant<Button label=… />
像给函数传参数
- 子组件读到的 props（只读）
label加入购物车variantsolid - 加入购物车
<Button label="加入购物车" variant="solid" />
1 / 4
Parent · 父组件准备好数据
03 · 放进真实任务
什么时候会遇到它
配置内容
列表里每张卡片的标题、封面都不同，数据全来自 props。
控制形态
同一个弹窗组件，传 confirm 或 alert，按钮组合就不一样。
排查显示
组件显示不对时，先看父组件传进来的 props 对不对。
04 · 想一想
用一个问题检查理解
一个头像组件在页面 A 是圆形，页面 B 想要方形。应该复制一份组件改样式吗？
查看答案
不用复制。给组件加一个 shape 属性（默认圆形），页面 B 传入方形即可——定义保持一份，差异交给 props 表达。
最容易踩的坑
Props 是自上而下的单行道：子组件只读它，不该偷偷修改它。想改数据，应该通知父组件去改，否则两边就说不清谁是真相了。