Vue插槽本质是“在哪留口、留什么口、谁来填口”的设计思维，分为默认插槽（单入口）、具名插槽（多入口）和作用域插槽（传递子组件数据），强调职责明确、默认可用与精炼传参。
Vue 插槽不是“怎么写语法”，而是“在哪留口、留什么口、谁来填口”的设计思维。它让组件从固定模板变成可组装的 UI 积木——父组件决定内容，子组件只管布局和逻辑。
默认插槽：一个入口，填入任意内容
最常用也最直观。子组件用 <slot></slot> 占位，父组件在标签内直接写内容，就会自动“掉进”这个位置。
- 支持纯文本、HTML 标签、其他组件，甚至带
v-if或v-for的结构 - 可以设置后备内容：
<slot>暂无数据</slot>，父组件不传内容时就显示它 - 父组件传入的内容，作用域属于父组件——能访问父组件的
data、methods，但读不到子组件内部的数据
具名插槽：多个入口，各司其职
当组件需要多个定制区域（比如页头、主体、页脚），就用 name 区分插槽位置。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 子组件中写：
<slot name="header"></slot>、<slot name="footer"></slot> - 父组件用
<template #header></template>和<template #footer></template>分别投递 - 所有具名插槽内容必须包裹在
<template>标签里，否则不会生效 - 没加
name的<slot>就是默认插槽，对应父组件中未包裹在<template>里的内容
作用域插槽：子组件“托付”数据，父组件决定怎么画
不只是留个口，还要把内部状态“交出去”。适合需要根据子组件数据动态渲染的场景，比如列表空态、日期单元格、表格行。
立即学习“前端免费学习笔记（深入）”；
- 子组件中写：
<slot name="empty" :error="err" :retry="handleRetry"></slot> - 父组件接收时解构：
<template #empty="{ error, retry }"><div>{{ error?.message }}<button @click="retry">重试</button></div></template> - 关键点：传递的是计算好的状态对象（如
{ isToday: true, isSelected: false }），而不是原始数据（如一个Date实例），避免父组件重复判断逻辑
实用建议：别为了用而用，先想清楚“为什么留”
插槽不是越多越好。每个插槽都该有明确职责和合理默认行为：
- 留插槽前问一句：这部分 UI 是否真的会因业务而变？是否值得让使用者接管？
- 提供默认内容，确保不传插槽时组件仍可用、样式不崩、交互完整
- 作用域插槽传参要精炼——只暴露必要字段，避免把整个
this或未加工的 props 塞出去 - 命名清晰，比如
date-cell比item更易理解用途
