插槽是Vue实现组件内容灵活分发的核心机制，分为默认插槽（单入口、支持后备内容）、具名插槽（多入口、按name匹配）和作用域插槽（子组件传递数据供父组件定制渲染），本质是编译时作用域隔离。
插槽是 Vue 里实现组件内容灵活分发的核心机制，不是传数据，而是把父组件写的模板内容“投递”到子组件指定位置。它让组件结构固定、内容可变，真正提升复用性。
默认插槽：一个入口，填什么就渲染什么
子组件用 <slot></slot> 定义接收点，父组件直接在标签内写内容，就会自动填进去。
- 支持后备内容：
<slot>暂无内容</slot>——父组件没传内容时显示这句 - 父组件传的内容保持自身作用域，能访问自己的 data、methods，但拿不到子组件内部变量
- 可传纯文本、HTML 标签、其他组件，甚至带
v-if或v-for的结构 - 子组件中只应有一个无名
<slot>，多个会导致内容重复或逻辑混乱
具名插槽：多个出口，按名字精准投送
当组件需要多个定制区域（比如 header、main、footer），就靠 name 区分。
- 子组件写：
<slot name="header"></slot>、<slot name="footer"></slot>，没 name 的仍是默认插槽 - 父组件用
<template #header>...</template>投递，#是v-slot:的推荐缩写 - 所有具名插槽内容必须包在
<template>标签里，否则会被忽略 - 如果父组件写了
#sidebar，但子组件没定义name="sidebar"，这段内容不会渲染
作用域插槽：子组件“托付”数据，父组件决定怎么展示
它不只是留个口子，还能把子组件的数据“带出来”，交给父组件自由组织模板。
立即学习“前端免费学习笔记（深入）”；
- 子组件在
<slot>上绑定数据：<slot :user="userInfo" :role="level"></slot> - 父组件用
<template #default="props">{{ props.user.name }}</template>接收，props就是那个对象 - 常用在列表项、表格行等场景：子组件负责循环和状态管理，父组件控制每项的样式和交互
- 也可以解构写法：
<template #default="{ user, role }">{{ user.name }} ({{ role }})</template>
不复杂但容易忽略：插槽本质是编译时的作用域隔离——父的内容在父的作用域编译，子的内容在子的作用域编译。理清这点，很多“变量 undefined”问题自然就解开了。
