组件

Slot 插槽

在 Vue 3 中，插槽（Slot）是一种允许你在组件中定义占位符，以便在使用组件时传入模版内容的机制。插槽使得组件更加灵活和可复用。

默认插槽

声明默认插槽非常简单，只需在组件的模板中使用 <slot></slot> 标签即可。如果没有传入任何内容，插槽会显示默认内容。

1<!-- CustomView.vue -->
2<template>
3    <div>
4        <slot>默认插槽</slot>
5    </div>
6</template>

在父组件中使用该组件时，可以传入自定义内容：

1<!-- ParentComponent.vue -->
2<template>
3    <div>
4        <CustomView>
5            <p>这是传入的插槽内容</p>
6        </CustomView>
7    </div>
8</template>

具名插槽

具名插槽允许你在组件中定义多个插槽，并通过名称来区分它们。这样可以让父组件更灵活地传入内容。

 1<!-- CustomView.vue -->
 2<template>
 3    <div>
 4        <header>
 5            <slot name="header">默认头部内容</slot>
 6        </header>
 7        <main>
 8            <slot>默认主体内容</slot>
 9        </main>
10        <footer>
11            <slot name="footer">默认底部内容</slot>
12        </footer>
13    </div>
14</template>

在父组件中使用具名插槽：

 1<!-- ParentComponent.vue -->
 2<template>
 3    <div>
 4        <CustomView>
 5            <template #header>
 6                <h1>这是自定义头部</h1>
 7            </template>
 8            <p>这是自定义主体内容</p>
 9            <template #footer>
10                <p>这是自定义底部</p>
11            </template>
12        </CustomView>
13    </div>
14</template>

数据传递

在某些场景下父组件需要使用子组件内的数据，这时可以通过 作用域插槽（scoped slots）来实现。可以像对组件传递 props 那样，向一个插槽的出口上传递数据。

 1<!-- CustomView.vue -->
 2<template>
 3    <div>
 4        <slot :data="message">默认插槽</slot>
 5    </div>
 6</template>
 7
 8<script setup>
 9const message = "这是来自子组件的数据"
10</script>

在父组件中使用作用域插槽：

1<!-- ParentComponent.vue -->
2<template>
3    <div>
4        <CustomView #default="{ data }">
5            <p>子组件传递的数据: {{ data }}</p>
6        </CustomView>
7    </div>
8</template>

Note

为具名插槽传递数据的插槽称为：名作用域插槽。可以为特定的插槽传递不同的数据。