为什么需要模板定制
组件库的默认模板往往只覆盖通用场景。当业务需要调整结构、插入自定义内容或按条件切换布局时，直接改源码会破坏复用性。Vue 提供的模板定制能力，让使用方在组件外部控制内部渲染结果。
插槽：最常用的定制入口
默认插槽与具名插槽
默认插槽适合替换组件的核心内容区。具名插槽则把定制粒度细化到头部、尾部、操作区等位置。
自定义标题
正文内容
组件内部用 声明出口即可。使用方不传时，可在 slot 内写默认内容作为兜底。
作用域插槽
当子组件需要把内部数据暴露给父级决定渲染方式时，作用域插槽是关键。典型场景是表格列定制：
{{ value }}
子组件通过 v-bind 把 value 传给插槽，父组件拿到数据后自由决定 UI。这比在子组件里写死判断逻辑灵活得多。
动态组件与异步组件
允许在运行时切换组件。定制模板时常见于多形态展示：同一个卡片位置，根据数据类型渲染文本卡片、图片卡片或图表卡片。
如果候选组件较多且体积较大，配合 defineAsyncComponent 按需加载，避免首屏打包过大。
渲染函数与 JSX
插槽和动态组件无法覆盖所有场景，比如需要根据数据深度生成嵌套结构时，渲染函数更直接。
export default {
props: [‘items’],
render(h) {
return h(‘ul’, this.items.map(item =>
h(‘li’, { key: item.id }, item.label)
))
}
}
在 JSX 中写法更接近模板：
render() {
return
- {this.items.map(i =>
- {i.label}
)}
}
渲染函数的优势是完全掌控 vnode 结构，代价是失去模板编译期的静态提升优化。建议只在插槽表达力不足时使用。
定制与封装的平衡
模板定制不是越开放越好。暴露过多插槽会让组件 API 变得难以维护。实践中的判断标准是：如果一个定制需求在三个以上业务中出现，就把它沉淀为具名插槽或 prop；如果只是个别页面的特殊布局，用作用域插槽在调用处解决，不要污染组件本身。
同时注意插槽内容的样式隔离。父组件传入的 DOM 默认不受子组件 scoped 样式影响，需要提前约定类名或使用 :deep() 穿透。
小结
Vue 模板定制的路径从默认插槽、具名插槽、作用域插槽，到动态组件和渲染函数，控制力逐级增强，封装成本也逐级上升。选择时优先用插槽，插槽不够再考虑动态组件，最后才用渲染函数。保持组件对外接口稳定，把变化留在调用侧，才是可维护的定制方案。
