这一节了解一下Vue3中的插槽,它简单讲就是给子组件预留的“占位符”允许父组件向子组件模板的指定位置注入自定义内容实现组件结构与内容的解耦,总结如下:API:插槽组件内预留的内容占位出口让父组件可以向子组件内部传入自定义 HTML / 组件内容。父template #插槽名v-slot:简写# 子slot name插槽名 :子数据子数据/slot栗子:默认插槽子组件 Card.vue template div classcard h3通用卡片标题/h3 slot p卡片默认内容/p /slot /div /template style scoped .card { border:1px solid #ccc; padding:16px; width:300px; } /style父组件App.vue script setup import Card from ./Card.vue /script template !-- 父组件传入内容填充到子组件默认slot位置 -- Card p我是父组件传入的卡片内容/p button按钮/button /Card Card/Card /template具名插槽子组件Layout.vue template div classlayout header classheader slot nameheader/slot /header main classmain slot/slot /main footer classfooter slot namefooter/slot /footer /div /template style scoped .layout {width:400px;border:1px solid #eee;} .header{background:#f5f5f5;padding:8px;} .main{padding:12px;} .footer{background:#f5f5f5;padding:8px;text-align:center;} /style父组件App.vue script setup import Layout from ./Layout.vue /script template Layout template #header h4页面头部/h4 /template p主体区域内容/p template #footer span©2026 版权信息/span /template /Layout /template作用域插槽子组件MyList.vue template ul classlist li v-foritem in list :keyitem.id slot :rowitem {{ item.name }} /slot /li /ul /template script setup const list [ { id:1, name:张三, age:20 }, { id:2, name:李四, age:25 }, { id:3, name:王五, age:30 } ] /script style scoped .list {list-style:none;padding:0;} li {border-bottom:1px solid #eee;padding:8px;} /style父组件App.vue script setup import MyList from ./MyList.vue /script template h3自定义列表渲染/h3 MyList template #defaultslotProps div span姓名{{ slotProps.row.name }}/span span stylemargin-left:20px年龄{{ slotProps.row.age }}/span button stylemargin-left:10px编辑/button /div /template /MyList /template注意:1 编译作用域规则插槽内容在父组件作用域中编译只能访问父组件的数据无法直接访问子组件的数据2 具名插槽必须用template 包裹v-slot/#只能写在template或组件标签上不能直接写在普通元素上。原理:插槽本质不是“把 HTML片段传给子组件”而是父组件提前生成渲染函数把一段VNode节点函数传递给子组件子组件在自身渲染阶段调用这个函数生成VNode最终挂载到slot出口位置。