免费做网站空间长沙网络营销顾问

 背景增加组件的复用性，个人体验组件化还是react 方便。

Vue插槽solt如何传递具名插槽的数据给子组件？

一、solt 原理

知其然知其所以然

Vue的插槽（slots）是一种分发内容的机制，允许你在组件模板中定义可插入的内容，然后在使用组件的地方提供这些内容。

插槽的工作原理是这样的：

1. 当Vue编译一个组件模板时，它会查找所有的<slot>元素。每个<slot>元素都代表一个插槽。

2. 对于每个插槽，Vue会查看它是否有名字（通过name属性指定）。如果有，那么它就是一个具名插槽；如果没有，那么它就是一个默认插槽。

3. 当Vue渲染一个组件时，它会查看组件的父上下文中是否提供了插槽内容。如果提供了，那么Vue会用这些内容替换掉插槽；如果没有提供，那么Vue会使用插槽的默认内容（如果有的话）。

4. 插槽内容是在父上下文中编译的，但是它们可以访问子上下文中的数据。这是通过作用域插槽实现的，你可以在插槽内容中使用特殊的<template>元素，并通过v-slot指令提供一个可以访问子上下文中数据的模板。

这就是Vue插槽的基本工作原理。插槽是Vue组件系统的一个重要部分，它们提供了一种灵活的方式来组合和重用组件。

二、单个插入结构

子组件

上文略....<el-table :data="tableData" style="width: 100%"><slot></slot>
</el-table>下文略....

父组件中，你可以这样使用ExportRecordsModal组件，并填充插槽：

<ExportRecordsModalv-model:diaShow="diaShow":onDialogClose="onDialogClose":onDownLoad="downLoad":tableData="tableDataList":diaPagination="diaPagination":sizeChangeDia="sizeChangeDia":currentChangeDia="currentChangeDia"
>// 插槽DOM<el-table-column label="导出时间"><template #default="scope"><span>{{ scope.row.createTime }}</span></template></el-table-column>
</ExportRecordsModal>

三、多个插槽

子组件

上文略....<el-table :data="props.tableData" style="width: 100%"><slot name="column1"></slot><slot name="column2"></slot>
</el-table>下文略....

父组件

<ExportRecordsModalv-model:diaShow="diaShow":onDialogClose="onDialogClose":onDownLoad="downLoad":tableData="tableDataList":diaPagination="diaPagination":sizeChangeDia="sizeChangeDia":currentChangeDia="currentChangeDia"
><template #column1><el-table-column label="序号"><template #default="scope"><span>{{ scope.row.createTime }}</span></template></el-table-column></template><template #column2><!-- 你的第二个列定义 --></template>
</ExportRecordsModal>

实现前

 实现后