vue3插槽详解

默认插槽

默认插槽是最基本的插槽类型，用于接收父组件传递的任意内容。

子组件 (ChildComponent.vue)

<template><div><h2>子组件标题</h2><!-- 默认插槽 --><slot></slot></div>
</template><script setup>
// Composition API 不需要额外代码处理默认插槽
</script>

父组件使用

<template><ChildComponent><p>这是插入到默认插槽的内容</p></ChildComponent>
</template><script setup>
import ChildComponent from './ChildComponent.vue'
</script>

具名插槽

具名插槽允许你有多个插槽，并通过名称区分它们。

子组件 (NamedSlots.vue)

<template><div><header><slot name="header"></slot></header><main><slot></slot> <!-- 默认插槽 --></main><footer><slot name="footer"></slot></footer></div>
</template><script setup>
// 不需要额外代码处理具名插槽
</script>

父组件使用

<template><NamedSlots><template v-slot:header><h1>这是头部内容</h1></template><p>这是默认插槽的内容</p><template v-slot:footer><p>这是页脚内容</p></template></NamedSlots>
</template><script setup>
import NamedSlots from './NamedSlots.vue'
</script>

作用域插槽

作用域插槽允许子组件向插槽传递数据，父组件可以访问这些数据。

子组件 (ScopedSlot.vue)

<template><ul><li v-for="item in items" :key="item.id"><!-- 向插槽传递数据 --><slot :item="item" :index="index"></slot></li></ul>
</template><script setup>
import { ref } from 'vue'const items = ref([{ id: 1, name: '项目1' },{ id: 2, name: '项目2' },{ id: 3, name: '项目3' }
])
</script>

父组件使用

<template><ScopedSlot><!-- 使用解构语法接收作用域数据 --><template v-slot="{ item, index }">{{ index + 1 }}. {{ item.name }}</template></ScopedSlot>
</template><script setup>
import ScopedSlot from './ScopedSlot.vue'
</script>

动态插槽名

Vue 3 支持动态插槽名

<template><DynamicSlot><template v-slot:[dynamicSlotName]>动态插槽内容</template></DynamicSlot>
</template><script setup>
import { ref } from 'vue'const dynamicSlotName = ref('header')
</script>

使用 useSlots() 来访问插槽内容

<script setup>
import { useSlots } from 'vue'const slots = useSlots()// 检查某个插槽是否存在
if (slots.header) {console.log('header 插槽存在')
}
</script>