vue.js插槽是组件结构解耦的设计方法：默认插槽提供灵活入口并支持后备内容；具名插槽实现多区域控制；作用域插槽让子组件传递精炼状态供父组件定制渲染。
Vue.js 的插槽不是语法技巧，而是组件结构解耦的设计方法——子组件定骨架、父组件填内容，让同一个组件能适配不同场景。
默认插槽：一个灵活入口，适合简单定制
子组件用 <slot></slot> 占位，父组件直接在标签内写内容，就会自动填充进去。它支持文本、HTML、其他组件，甚至带 v-if 或 v-for 的结构。
- 可以设置后备内容：
<slot>暂无数据</slot>，父组件不传时显示它 - 传入的内容作用域属于父组件，能访问父组件的
data和methods，但读不到子组件内部数据 - 适用于按钮、卡片、提示框等只需替换主体内容的场景
具名插槽：多个固定位置，实现区域化控制
当组件需要区分头部、主体、底部等不同区域时，用 name 属性定义多个插槽入口。
- 子组件中写：
<slot name="header"></slot>、<slot name="footer"></slot> - 父组件用
<template></template>和<template></template>分别投递内容 - 所有具名插槽必须包裹在
<template></template>标签里，否则不会生效 - 未命名的
<slot></slot>自动成为默认插槽，对应父组件中未包裹在<template></template>里的内容
作用域插槽：子组件交出数据，父组件决定怎么渲染
不只是留口，还要把内部状态“托付”出去，适合需要根据子组件数据动态生成 UI 的情况，比如列表空态、表格行、日期单元格。
- 子组件中写：
<slot name="item" :item="item"></slot>，把计算好的对象（如{ id: 1, title: 'xxx', isDone: true }）传给父组件 - 父组件接收时解构：
<template item><p>{{ item.title }}</p></template> - 关键点是传递精炼后的状态，而不是原始数据（比如不传
Date实例，而传{ isToday: true }），避免父组件重复判断逻辑 - 常用于封装可复用的数据容器，如分页列表、筛选面板、弹窗布局
插槽让组件从“写死模板”变成“可组装积木”，结构清晰、职责分明，既保持子组件逻辑封闭，又赋予父组件充分定制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
