props 和 slots 是 vue 组件的两类独立输入接口：props 为编译期绑定、运行时校验的响应式数据，slots 为运行时执行、延迟求值的作用域函数，二者不转换、不共享生命周期，但协同构成完整组件 api。
Props 和 Slots 在 Vue 组件渲染中走的是两条不同路径：Props 是数据驱动的静态输入，Slots 是模板驱动的动态内容。它们不互相转换，也不共享生命周期阶段，但共同构成组件的“输入接口”。
Props：编译期绑定 + 运行时校验
Props 在模板编译阶段就被解析为响应式 prop 对象，挂载到组件实例的 $props 上。Vue 会根据声明的类型、默认值和校验规则，在初始化时做一次完整校验，并建立响应式依赖追踪。
- 父组件更新响应式数据 → 触发子组件 props 更新 → 触发子组件 render 函数重执行（如果该 prop 被模板或 computed 使用）
- props 不可直接修改，否则触发警告；如需派生状态，应使用 computed 或 watch
- 未声明的 props 会被自动透传到根元素（若组件单根），也可通过 defineOptions({ inheritAttrs: false }) 关闭
Slots：运行时函数 + 延迟求值
Slots 不是数据，而是函数——每个插槽名（如 default、header）对应一个返回 VNode 数组的函数。它在父组件 render 阶段被调用，但实际执行时机取决于子组件如何使用（比如是否条件渲染、是否传给下级组件）。
- slots.xxx() 调用即执行，返回的是已创建的 VNode，不是模板字符串
- 插槽内容天然具备作用域性：可通过 作用域插槽 向父级暴露子组件内部数据，如
<template row>{{ row.name }}</template> - 空插槽（
slots.default?.()返回空数组）不会渲染 DOM，避免无意义节点，比 v-if 更轻量
二者协作的关键节点：setup 与 render 函数
在组合式 API 中，setup 接收的 slots 是一个只读对象，而 props 是响应式代理。当需要混合使用（例如根据 props 决定是否渲染某插槽），逻辑必须写在 render 函数或模板中：
- 模板中：
<slot v-if="showHeader" name="header"></slot> - render 函数中：
slots.header && h('header', slots.header()) - 不能在 setup 中提前解构
slots.default()并存为变量，否则失去响应性——因为插槽函数每次 render 都可能返回新 VNode
高阶场景：插槽透传与 props 衍生控制
当组件仅作布局容器（如 Card、Layout），常需同时处理 props 控制行为 + slots 控制结构：
- 用 props 控制是否启用某区域（如
showFooter: Boolean），再配合v-if或条件调用slots.footer?.() - 透传插槽时，推荐 Vue 3.3+ 的
v-slots="slots"语法，简洁安全；手动透传则需确保函数包装正确，例如：{ default: () => slots.default?.() } - 不要试图把 slot 内容转成 props 传递（如
:content="slots.default?.()[0]"），这破坏了插槽的设计意图，也丢失了响应性和作用域能力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
