Vue 插槽（Slot）全解析：从 Vue2 到 Vue3 核心用法与案例

插槽Slot是 Vue 中最强大的功能之一它的核心作用是实现组件内容的分发让子组件成为一个可定制、可复用的「容器」父组件可以向子组件传递任意 HTML 结构、组件甚至逻辑彻底解决了组件内容固化的问题。一、插槽核心概念简单理解子组件定义插槽位置相当于预留一个「空位」。父组件向「空位」填充自定义内容文本、HTML、组件都可以。如果父组件不填充内容子组件可以设置默认内容。二、Vue3 插槽完整用法Vue3 完全兼容 Vue2 插槽语法废弃了旧版语法统一使用更简洁的v-slot指令简写#语法更直观、语义更清晰。1. 默认插槽匿名插槽适用场景子组件只有一个需要分发的内容无需指定名称。子组件Child.vue使用slot标签定义插槽可设置默认内容templatedivclasschild-boxh3子组件标题/h3!--默认插槽父组件不传递内容时显示默认值--slot我是插槽默认内容/slot/div/template父组件使用直接在子组件标签内写内容会自动填充到默认插槽templateChild!--填充到子组件默认插槽的内容--p我是父组件传递的自定义内容/pbutton点击按钮/button/Child/templatescript setup// Vue3 组合式 APIimportChildfrom./Child.vue/script2. 具名插槽适用场景子组件有多个需要分发的位置通过名称区分插槽。语法子组件slot name插槽名/slot父组件#插槽名或v-slot:插槽名子组件Layout.vuetemplatedivclasslayout!--头部插槽--headerslot nameheader/slot/header!--中间默认插槽--mainslot/slot/main!--底部插槽--footerslot namefooter/slot/footer/div/template父组件使用必须用template标签配合插槽名称指定内容位置templateLayout!--填充 header 插槽#header 是 v-slot:header 的简写--template #headerh1页面标题/h1/template!--填充默认插槽可写 #default或省略--template #defaultp页面主体内容/p/template!--填充 footer 插槽--template #footerspan版权信息 ©2025/span/template/Layout/templatescript setupimportLayoutfrom./Layout.vue/script3. 作用域插槽核心价值子组件向父组件传递数据父组件可以使用子组件的数据渲染自定义内容。适用场景列表组件、表格组件子组件提供数据父组件决定展示样式。子组件List.vue通过v-bind把数据绑定到插槽上暴露给父组件templatedivclasslistslot v-foritem in list:keyitem.id!--子组件暴露数据自定义名称子组件数据--:itemitem/slot/div/templatescript setupimport{ref}fromvue// 子组件内部数据constlistref([{id:1,name:Vue3 教程},{id:2,name:插槽实战},{id:3,name:组合式 API}])/script父组件使用接收子组件传递的数据语法#插槽名接收对象templateList!--默认作用域插槽scope 接收子组件传递的所有数据--template #defaultscope!--使用子组件的 item 数据--divclassitem{{scope.item.id}}-{{scope.item.name}}/div/template/List/template解构写法更简洁推荐!--直接解构子组件传递的 item--template #default{ item }divclassitem{{item.id}}-{{item.name}}/div/template4. 动态插槽名Vue3 支持动态绑定插槽名称灵活性拉满templateLayout!--动态插槽slotName 是变量--template #[slotName]动态内容/template/Layout/templatescript setupimport{ref}fromvueconstslotNameref(header)// 可动态修改/script三、Vue2 插槽用法对比参考Vue2 分为旧语法和新语法v-slotVue3 废弃了旧语法只保留v-slot统一语法。1. Vue2 默认插槽!--子组件--slot默认内容/slot!--父组件--Child父组件内容/Child2. Vue2 具名插槽旧语法 vs 新语法旧语法废弃slot名称新语法兼容v-slot:名称Vue 2.6 支持!--旧语法不推荐Vue3 已删除--template slotheader头部内容/template!--新语法和 Vue3 一致--template v-slot:header头部内容/template3. Vue2 作用域插槽旧语法 vs 新语法旧语法废弃slot-scope新语法兼容v-slot!--旧语法--template slotdefaultslot-scopescope{{scope.item}}/template!--新语法和 Vue3 一致--template v-slot:defaultscope{{scope.item}}/template四、Vue2 与 Vue3 插槽核心区别特性Vue2Vue3推荐语法2.6 支持v-slot兼容旧语法仅支持v-slot简写#废弃所有旧语法旧语法支持slot、slot-scope完全废弃不再支持作用域插槽必须写在template上新语法规则一致更简洁动态插槽支持支持语法更简洁写法限制无特殊限制具名插槽必须写在template上一句话总结Vue3 插槽是 Vue2 新语法的精简版去掉了冗余语法统一使用#插槽名学习成本更低代码更简洁。五、插槽使用注意事项具名插槽必须配合template除了默认插槽具名插槽 / 作用域插槽都要写在template标签内。默认插槽简写#default可以省略直接写内容。数据作用域父组件插槽内容只能访问父组件数据子组件插槽内容只能访问子组件数据作用域插槽除外。默认内容优先级父组件传递内容 → 覆盖子组件默认内容不传递 → 显示默认内容。六、实战场景封装通用卡片组件用 Vue3 插槽封装一个高复用卡片组件演示默认 具名 作用域插槽组合使用子组件Card.vuetemplatedivclasscard!--卡片头部--divclasscard-headerslot nameheader默认标题/slot/div!--卡片内容--divclasscard-bodyslot默认内容/slot/div!--卡片底部作用域插槽--divclasscard-footerslot namefooter:timecurrentTime/slot/div/div/templatescript setupimport{ref}fromvueconstcurrentTimeref(newDate().toLocaleString())/script父组件使用templateCard!--头部--template #headerh4自定义卡片标题/h4/template!--内容--p这是卡片的自定义主体内容/p!--底部接收子组件时间--template #footer{ time }span更新时间{{time}}/span/template/Card/template总结插槽本质组件内容分发工具让子组件支持自定义内容。Vue3 核心语法默认插槽、#名称具名插槽、#名称数据作用域插槽。与 Vue2 差异废弃slot/slot-scope旧语法统一使用v-slot简写#更简洁规范。最佳实践封装通用组件列表、弹窗、布局、卡片必用插槽是 Vue 组件化开发的核心技能。个人速记具名插槽子组件用scope namexx接收,父组件template #xx插入作用域插槽子组件用scope namexx :变量名item,父组件template #xx{ 变量名 } span更新时间{{ 变量名 }}/span /template接收子组件变量