Props 设计需类型校验+默认值+required，拆解复杂对象为原子属性；事件通信优先 v-model 简写与 defineExpose；插槽以作用域插槽实现数据与渲染解耦；Provide/Inject 应传响应式对象并明确语义。
Props 设计：别让父组件“乱传”，也别让子组件“硬扛”
Props 是父子通信的起点，但常见问题不是传不传，而是怎么传得清晰、安全、可维护。类型校验 + 默认值 + required 标识是底线。Vue 3 的 defineProps 支持运行时类型（如 { type: String, default: '' }）和编译时类型（配合 TypeScript 接口），二者建议并用——TS 提供 IDE 提示和构建期检查，运行时校验兜底异常场景。
避免把整个对象或复杂嵌套结构当 Props 一股脑传入。应按职责拆解：比如传 user.name 和 user.avatar，而非整个 user 对象。这样子组件更专注、更易测试，也防止父组件意外修改深层响应式数据引发副作用。
需要响应式更新但又不想触发子组件重渲染？用 computed(() => props.xxx) 封装；需要监听变化做副作用？用 watch(() => props.xxx, ...)，而不是在 mounted 里读一次就不管。
事件通信：别只记得 $emit，v-model 和 expose 才是进阶关键
基础 $emit('update:xxx') 配合 v-model:xxx 是双向绑定标准写法，但 Vue 3 更推荐使用 v-model 的简写语法（如 v-model:title）并搭配 defineModel（需启用 defineModel 实验性特性）或显式声明 modelValue + update:modelValue。这样语义更统一，也便于组合式 API 中集中管理状态。
立即学习“前端免费学习笔记（深入）”；
子组件内部需要暴露方法给父组件调用？defineExpose 是唯一正解。不要依赖 ref 拿到组件实例再手动调方法——那会破坏封装性，且在 TS 中无法获得类型提示。正确做法是在子组件中：
- 用
const methods = { focus() { inputRef.value?.focus() } } - 再
defineExpose(methods) - 父组件通过
ref绑定后即可安全调用childRef.focus()
注意：被 defineExpose 的内容必须是响应式变量或函数，普通 const 变量不会被暴露出去。
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
插槽（Slots）：从默认插槽到作用域插槽，关键是“谁决定渲染逻辑”
默认插槽适合内容简单、结构固定的场景；具名插槽（#header / v-slot:footer）解决多区域定制；而作用域插槽才是高复用的核心——它把子组件的数据“交出去”，由父组件决定怎么展示。
例如一个列表组件，子组件只提供 item、index、isLast 等上下文，父组件用 <template item index>{{ item.name }}-{{ index }}</template> 自定义每一项，既解耦又灵活。
注意两个细节：
- 插槽内容在父组件作用域中编译，所以访问的是父组件的 data、methods；
- 若需在插槽中响应子组件状态变化（比如加载中状态），务必把相关响应式数据通过作用域插槽参数透出，不能指望父组件直接读子组件的 ref。
Provide / Inject：跨层级通信的“安全阀”，不是万能胶水
Provide / Inject 解决的是“祖-孙”甚至更深的通信需求，但它不是响应式数据的自动代理。如果 provide 的是原始值（如字符串、数字），inject 后不会响应更新；必须 provide 响应式对象（reactive({ count: 0 })）或 ref（ref(0)），且父级要主动更新其值。
更推荐的做法是：provide 一个包含状态 + 方法的对象，例如：
const store = reactive({ theme: 'light', toggleTheme() { this.theme = this.theme === 'light' ? 'dark' : 'light' } })provide('uiContext', store)- 子孙组件
const ctx = inject('uiContext')即可读写响应式数据
避免在根组件或 Layout 层无节制 provide 全局配置，容易造成隐式依赖和调试困难。每个 provide 应有明确语义（如 'formContext'、'tableApi'），并配对编写文档说明注入项及其用途。
组件设计避坑清单：高频翻车点直击
以下问题看似小，却常导致组件难以复用或线上报错：
-
未处理 undefined props：即使设了 default，父组件传
null或未定义字段仍可能触发错误，建议用props.xxx ?? 'default'或computed(() => props.xxx || 'default') - 插槽内使用 v-if/v-for 未加 template 包裹：导致插槽内容被当作单个节点处理，破坏结构预期
- 在 setup 中直接修改 props：Vue 会警告 “Avoid mutating a prop directly”，应 emit 事件由父组件更新
-
provide/inject 类型未标注：TS 下 inject 返回 any，极易引发运行时错误，务必用
inject<typeof xxx>('key')</typeof>显式断言 -
忽略 SSR 兼容性：在 setup 中直接访问
window或document，服务端渲染时报错，应包裹在onMounted或if (typeof window !== 'undefined')中
组件复用的本质，不是功能堆砌，而是边界清晰、契约明确、行为可预测。每加一个 Props、一个事件、一个插槽，都在增加使用者的理解成本——克制，才是高级复用的开始。
