Vue插槽是模板级内容分发机制，非通信或数据传递；默认插槽用无名<slot>，支持后备内容；具名插槽通过name属性精准投递；作用域插槽可向父组件传递子组件数据。

Vue插槽（Slot）本质是子组件预留的内容“入口”，父组件传什么，它就渲染什么——不是父子通信，也不是数据传递，而是模板级的内容分发机制。

默认插槽：最常用、最直接的占位方式

子组件用一个无名 <slot></slot> 定义接收位置，父组件在标签内写内容，就会自动填进去。

它支持后备内容：在 <slot>默认文案</slot> 中写文字或 HTML，当父组件没传任何内容时，这部分就会显示。

• 子组件中只能有一个默认插槽逻辑上最清晰；多个默认插槽会导致内容重复渲染，容易出错
• 父组件传入的内容保持原有作用域——能访问父组件的 data、methods、计算属性，但无法读取子组件内部的数据
• 传入内容可以是纯文本、HTML 标签、其他组件，甚至带 v-if / v-for 的复杂结构

具名插槽：给不同位置起名字，精准投递

当一个组件需要多个可定制区域（比如页头、主体、页脚），就用 name 属性区分插槽：

立即学习“前端免费学习笔记（深入）”；

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

子组件里写：<slot name="header"></slot>、<slot name="footer"></slot>、还有一个没 name 的就是默认插槽。

父组件对应使用：<template #header>...</template>、<template #footer>...</template>，中间不加 template 的内容进默认插槽。

• v-slot 缩写为 # 是推荐写法，比如 #header、#default
• 所有具名插槽内容必须包裹在 <template> 标签里，否则 Vue 会报错或忽略
• 如果父组件写了 #sidebar，但子组件没定义 name="sidebar" 的 slot，这段内容直接不渲染

作用域插槽：把子组件数据“托付”给父组件决定怎么展示

它让子组件不仅能留出口，还能往外“抛”数据。关键在子组件的 <slot :user="userInfo" :level="role"></slot> ——用绑定语法传值。

父组件接收时写：<template #default="slotProps">{{ slotProps.user.name }}</template>，slotProps 就是那个对象。

• 常见于列表、表格、弹窗等场景：子组件管结构和逻辑（如加载、分页），父组件决定每行/每项长什么样
• Vue 2 中用 slot-scope，Vue 2.6+ 统一为 v-slot，写法更统一
• 解构写法更简洁：<template #default="{ user, level }">...</template>

小技巧与避坑提醒

插槽不是万能胶，用对地方才高效：

• 不要为了用插槽而嵌套多层——简单 props 能解决的，别绕路；插槽适合内容结构差异大、复用性强的场景（如布局容器、卡片、表单控件）
• 插槽内容不会触发子组件的响应式更新逻辑，它的更新完全由父组件驱动
• 动态插槽名可用 v-slot:[dynamicName]，适合菜单、标签页等配置化组件
• Vue 3 中 script setup 语法下，插槽使用方式不变，但配合 defineSlots 更利于类型推导（TypeScript 场景）