Vue3中实现插槽使用
目录
一、前言
在 Vue 3 中，插槽（Slot）用于实现组件的内容分发机制，它允许你将父组件的内容传递给子组件，从而实现组件的灵活组合和重用。Vue 3 插槽的基本使用和 Vue 2 有些相似，但也引入了一些新的特性。下面是一些常见的插槽使用方式。
二、插槽类型
Vue 3 插槽的使用方式非常灵活，允许你根据需求选择最适合的插槽类型：
- 默认插槽：用于简单的内容传递。
- 命名插槽：用于多个插槽，帮助你分配不同内容到不同的位置。
- 作用域插槽：允许子组件传递数据给父组件，以便父组件动态渲染插槽内容。
- 具名插槽组合：可以在一个组件中使用多个具名插槽，灵活分配父组件的内容。
三、示例
分析：
当你需要实现该页面的的布局时，是否会想到使用插槽来优化代码？以上页面中，我的任务、检测反馈、监控区域、人脸设别告警、设备总览六个模块中，框架的模板使用的是同一个框架，所以在这时就可以像以下图中进行组件优化。
代码示例：
首先，你需要在src/components/目录下创建一个子组件TaskFeedback.vue，并添加如下代码：
<template>
<div class="task-feedback">
<!-- 使用具名插槽 -->
<slot name="header"></slot>
<!-- 默认插槽 -->
<slot></slot>
<!-- 其他插槽 -->
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: 'TaskFeedback',
};
</script>
<style scoped>
.task-feedback {
/* 添加样式 */
}
</style>然后，在父组件中引入并使用TaskFeedback组件，并通过插槽传递内容：
<!-- 在父组件中使用 TaskFeedback 组件 -->
<template>
<div>
<TaskFeedback>
<!-- 插入头部内容到 header 插槽 -->
<template v-slot:header>
<h1>我的任务检测反馈</h1>
</template>
<!-- 插入主要内容到默认插槽 -->
<table>
<thead>
<tr>
<th>类型</th>
<th>告警时间</th>
<th>位置</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in feedbackItems" :key="index">
<td>{{ item.type }}</td>
<td>{{ item.time }}</td>
<td>{{ item.location }}</td>
</tr>
</tbody>
</table>
<!-- 插入底部内容到 footer 插槽 -->
<template v-slot:footer>
<p>总数据量: {{ totalDataCount }}</p>
</template>
</TaskFeedback>
</div>
</template>
<script>
import TaskFeedback from './components/TaskFeedback.vue';
export default {
components: {
TaskFeedback,
},
data() {
return {
feedbackItems: [
{ type: '温度异常', time: '2023-08-20 16:21:29', location: '园区A区' },
// 更多数据...
],
totalDataCount: 50,
};
},
};
</script>我们使用了三个插槽：
v-slot:header用于插入头部内容。- 默认插槽用于插入主要的内容。
v-slot:footer用于插入底部内容。
可以根据实际需要自定义每个插槽的内容，使界面更具灵活性和可扩展性。
四、插槽的分类实现
1. 基本插槽
基本插槽允许父组件传递内容到子组件中的指定位置。父组件内容会替换子组件中指定 <slot> 标签的位置
<!-- Parent.vue -->
<template>
<Child>
<p>This is some content from the parent</p>
</Child>
</template>
<script>
import Child from './Child.vue';
export default {
components: { Child }
};
</script>
<!-- Child.vue -->
<template>
<div>
<slot></slot> <!-- 插槽的位置 -->
</div>
</template>
在这个例子中，父组件 Parent 向子组件 Child 传递了 <p> 标签内容，这些内容会替换子组件中的 <slot></slot> 部分。
2. 命名插槽
如果你需要多个插槽，可以为每个插槽指定一个名称。父组件可以将内容插入到指定的命名插槽中。
<!-- Parent.vue -->
<template>
<Child>
<template #header>
<h1>Header Content</h1>
</template>
<template #footer>
<p>Footer Content</p>
</template>
</Child>
</template>
<script>
import Child from './Child.vue';
export default {
components: { Child }
};
</script>
<!-- Child.vue -->
<template>
<div>
<header>
<slot name="header"></slot> <!-- 命名插槽 -->
</header>
<footer>
<slot name="footer"></slot> <!-- 命名插槽 -->
</footer>
</div>
</template>
在这个例子中，父组件为 header 和 footer 插槽分别传递了内容。子组件通过 <slot name="header"> 和 <slot name="footer"> 分别插入不同的内容。
3. 默认插槽内容
如果父组件没有传递内容给某个插槽，可以为插槽指定默认内容。
<!-- Parent.vue -->
<template>
<Child>
<!-- 没有传递给插槽内容，使用默认插槽内容 -->
</Child>
</template>
<script>
import Child from './Child.vue';
export default {
components: { Child }
};
</script>
<!-- Child.vue -->
<template>
<div>
<slot>默认内容</slot> <!-- 如果父组件没有传递内容，将使用默认内容 -->
</div>
</template>
当父组件没有传递任何内容时，子组件中的 <slot> 会显示默认内容“默认内容”。
4. 作用域插槽（Scoped Slots）
有时你需要在插槽中传递一些数据给父组件，这时候就需要使用作用域插槽。作用域插槽允许子组件将数据传递给父组件，让父组件能动态渲染插槽内容。
<!-- Parent.vue -->
<template>
<Child v-slot:default="slotProps">
<p>接收到的 message: {{ slotProps.message }}</p>
</Child>
</template>
<script>
import Child from './Child.vue';
export default {
components: { Child }
};
</script>
<!-- Child.vue -->
<template>
<div>
<slot :message="message"></slot> <!-- 通过作用域插槽将数据传递给父组件 -->
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello from Child!'
};
}
};
</script>
在这个例子中，子组件通过 v-slot 绑定了一个作用域插槽，传递了一个 message 给父组件。父组件通过 slotProps 获取到这个数据并显示。
5. 多插槽与具名插槽组合
你可以在一个组件中使用多个具名插槽，这允许父组件根据不同的插槽名称传递不同的内容。
<!-- Parent.vue -->
<template>
<Child>
<template #header>
<h1>This is the header</h1>
</template>
<template #main>
<p>This is the main content</p>
</template>
<template #footer>
<p>This is the footer</p>
</template>
</Child>
</template>
<script>
import Child from './Child.vue';
export default {
components: { Child }
};
</script>
<!-- Child.vue -->
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
这里，父组件为 header、main 和 footer 提供了不同的内容，子组件会根据插槽名称进行插入。
原文地址：https://blog.csdn.net/weixin_74457498/article/details/143806437
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！