vue3中如何使用slot来构建可复用组件
在 Vue 3 中，插槽（Slot） 是一种强大的工具，用于构建可复用组件。通过插槽，可以将内容分发到组件的特定位置，从而实现更灵活的组件设计。以下是 Vue 3 中使用插槽构建可复用组件的详细指南：
- 默认插槽
默认插槽是最简单的插槽类型，用于将内容分发到组件的默认位置。
<!-- BaseComponent.vue -->
<template>
<div class="base-component">
<slot>默认内容</slot> <!-- 默认插槽 -->
</div>
</template>
<!-- ParentComponent.vue -->
<template>
<BaseComponent>
<p>这是自定义内容</p> <!-- 替换默认插槽的内容 -->
</BaseComponent>
</template>
<script setup>
import BaseComponent from './BaseComponent.vue';
</script>
输出结果：
<div class="base-component">
<p>这是自定义内容</p>
</div>
- 具名插槽
具名插槽允许将内容分发到组件的特定位置。
<!-- BaseComponent.vue -->
<template>
<div class="base-component">
<header>
<slot name="header">默认头部</slot> <!-- 具名插槽 -->
</header>
<main>
<slot>默认内容</slot> <!-- 默认插槽 -->
</main>
<footer>
<slot name="footer">默认尾部</slot> <!-- 具名插槽 -->
</footer>
</div>
</template>
<!-- ParentComponent.vue -->
<template>
<BaseComponent>
<template v-slot:header> <!-- 具名插槽 -->
<h1>自定义头部</h1>
</template>
<p>这是自定义内容</p> <!-- 默认插槽 -->
<template v-slot:footer> <!-- 具名插槽 -->
<p>自定义尾部</p>
</template>
</BaseComponent>
</template>
<script setup>
import BaseComponent from './BaseComponent.vue';
</script>
输出结果：
<div class="base-component">
<header>
<h1>自定义头部</h1>
</header>
<main>
<p>这是自定义内容</p>
</main>
<footer>
<p>自定义尾部</p>
</footer>
</div>
- 作用域插槽
作用域插槽允许子组件向父组件传递数据，父组件可以根据数据自定义渲染内容。
<!-- BaseComponent.vue -->
<template>
<div class="base-component">
<slot :user="user"></slot> <!-- 作用域插槽 -->
</div>
</template>
<script setup>
import { ref } from 'vue';
const user = ref({ name: 'Alice', age: 25 }); // 子组件的数据
</script>
<!-- ParentComponent.vue -->
<template>
<BaseComponent v-slot="{ user }"> <!-- 解构作用域插槽的数据 -->
<p>用户名: {{ user.name }}</p>
<p>年龄: {{ user.age }}</p>
</BaseComponent>
</template>
<script setup>
import BaseComponent from './BaseComponent.vue';
</script>
输出结果：
<div class="base-component">
<p>用户名: Alice</p>
<p>年龄: 25</p>
</div>
- 动态插槽名
Vue 3 支持动态插槽名，可以根据变量动态选择插槽。
<!-- BaseComponent.vue -->
<template>
<div class="base-component">
<slot name="header">默认头部</slot>
<slot name="content">默认内容</slot>
<slot name="footer">默认尾部</slot>
</div>
</template>
<!-- ParentComponent.vue -->
<template>
<BaseComponent>
<template v-slot:[slotName]> <!-- 动态插槽名 -->
<p>这是动态插槽的内容</p>
</template>
</BaseComponent>
</template>
<script setup>
import { ref } from 'vue';
import BaseComponent from './BaseComponent.vue';
const slotName = ref('header'); // 动态插槽名
</script>
输出结果：
<div class="base-component">
<p>这是动态插槽的内容</p>
<slot name="content">默认内容</slot>
<slot name="footer">默认尾部</slot>
</div>
- 插槽的默认内容
可以为插槽提供默认内容，当父组件没有提供内容时显示。
<!-- BaseComponent.vue -->
<template>
<div class="base-component">
<slot name="header">默认头部</slot>
<slot>默认内容</slot>
<slot name="footer">默认尾部</slot>
</div>
</template>
<!-- ParentComponent.vue -->
<template>
<BaseComponent>
<template v-slot:header>
<h1>自定义头部</h1>
</template>
<!-- 不提供默认插槽内容 -->
</BaseComponent>
</template>
<script setup>
import BaseComponent from './BaseComponent.vue';
</script>
输出结果：
<div class="base-component">
<h1>自定义头部</h1>
默认内容
<slot name="footer">默认尾部</slot>
</div>
总结
-
默认插槽：用于分发内容到组件的默认位置。
-
具名插槽：用于分发内容到组件的特定位置。
-
作用域插槽：允许子组件向父组件传递数据，父组件可以自定义渲染内容。
-
动态插槽名：根据变量动态选择插槽。
-
插槽的默认内容：当父组件没有提供内容时显示默认内容。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
