vue插槽机制是内容分发协议：具名插槽按位置投放内容，作用域插槽由父组件定制子数据渲染；前者用于多区域布局，后者适用于列表项等需自定义展示的场景。
Vue 的插槽机制本质是内容分发协议，不是数据传递工具。具名插槽解决“内容往哪放”，作用域插槽解决“内容怎么渲染”，两者分工明确，不能混用。
具名插槽：按位置精准投放内容
适用于子组件有多个固定区域、父组件需分别填充的场景，比如布局容器（头部/主体/侧边栏）、表单卡片（标题区/输入区/操作区）。
- 子组件用
<slot name="xxx"></slot>定义多个命名出口，可带默认内容（如<slot name="sidebar"><defaultsidebar></defaultsidebar></slot>） - 父组件用
<template>...</template>或<p slot="xxx">...</p>（旧写法，已不推荐）对应填充 - 同一个名字可多次使用，内容会依次插入所有同名插槽位置
- 默认插槽（无 name）仍存在，它接收所有未被具名插槽捕获的内容
作用域插槽：让父组件决定子数据怎么展示
适用于子组件持有数据、但渲染逻辑需由父组件定制的情况，比如列表项、表格单元格、搜索结果项。
- 子组件在
<slot></slot>上绑定数据，例如<slot :user="currentUser" :index="i"></slot> - 父组件用
v-slot="{ user, index }"解构接收，然后自由组织 HTML 或组件结构 - 若只有一个作用域插槽，可简写为
<child v-slot="{ item }">{{ item.name }}</child>，省略<template></template> - 注意：作用域插槽中能访问的是子组件暴露的数据，不是子组件自身的 this 或 methods
常见误区与关键细节
容易混淆的点往往出现在作用域和数据流向的理解上。
- 插槽内容始终在父组件作用域编译，所以
{{ user.name }}中的user必须来自作用域插槽暴露，不能直接访问子组件 data - 具名插槽不传内容时显示默认内容；作用域插槽不传时显示
<slot></slot>内部的 fallback 内容（如果有） -
v-slot只能用在<template></template>或组件标签上，不能直接写在普通 HTML 标签上 - Vue 3 中可用
defineSlots声明插槽类型，提升 TypeScript 类型安全
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
