Vue 插槽（Slot）完全指南

插槽是 Vue 中组件内容分发的机制让父组件可以向子组件传递 HTML 内容。一、为什么需要插槽!-- 子组件 Card.vue -- div classcard div classheader标题/div div classbody内容/div /div !-- 父组件使用 -- Card / !-- 只能显示固定的内容不够灵活 --插槽的作用让父组件可以自定义子组件内部的内容。二、三种插槽类型类型说明数量使用场景默认插槽没有名字的插槽1个单一内容区域具名插槽有名字的插槽多个多个不同位置作用域插槽可以传递数据的插槽多个子组件数据需要父组件决定如何渲染三、默认插槽Default Slot父组件使用Child p这是父组件传入的内容/p /Child子组件定义!-- Child.vue -- div classcard div classheader卡片标题/div div classbody !-- 默认插槽父组件传入的内容会显示在这里 -- slot/slot /div /div渲染结果div classcard div classheader卡片标题/div div classbody p这是父组件传入的内容/p /div /div默认内容后备内容!-- 子组件提供默认内容 -- slot默认显示的内容/slot!-- 父组件不传内容时显示默认 -- Child / !-- 显示默认显示的内容 -- Child自定义内容/Child !-- 显示自定义内容 --四、具名插槽Named Slot当子组件有多个不同位置需要填充时使用具名插槽。父组件使用Vue 3 语法Card template #header h2自定义头部/h2 /template template #default p自定义主体内容/p /template template #footer button确认/button button取消/button /template /Card子组件定义!-- Card.vue -- div classcard div classheader slot nameheader默认头部/slot /div div classbody slot默认内容/slot /div div classfooter slot namefooter默认底部/slot /div /div简写对照完整写法简写说明v-slot:header#header常用v-slot:default#default默认插槽v-slot:footer#footer具名插槽五、作用域插槽Scoped Slot作用域插槽让子组件可以向父组件传递数据父组件根据这些数据决定如何渲染。父组件使用Table :datauserList !-- 接收子组件传递的数据 -- template #row{ rowData, index } div classcustom-row span classindex{{ index 1 }}/span span classname{{ rowData.name }}/span span classage{{ rowData.age }}岁/span /div /template /Table子组件定义!-- Table.vue -- template div classtable div v-foritem in data :keyitem.id classrow !-- 把 item 传递给父组件 -- slot namerow :rowDataitem :indexindex !-- 默认显示方式 -- {{ item.name }} /slot /div /div /template script setup const props defineProps([data]) const data props.data /script