背景增加组件的复用性,个人体验组件化还是react 方便。
Vue插槽solt如何传递具名插槽的数据给子组件?
一、solt 原理
知其然知其所以然
Vue的插槽(slots)是一种分发内容的机制,允许你在组件模板中定义可插入的内容,然后在使用组件的地方提供这些内容。
插槽的工作原理是这样的:
-
当Vue编译一个组件模板时,它会查找所有的
<slot>
元素。每个<slot>
元素都代表一个插槽。 -
对于每个插槽,Vue会查看它是否有名字(通过
name
属性指定)。如果有,那么它就是一个具名插槽;如果没有,那么它就是一个默认插槽。 -
当Vue渲染一个组件时,它会查看组件的父上下文中是否提供了插槽内容。如果提供了,那么Vue会用这些内容替换掉插槽;如果没有提供,那么Vue会使用插槽的默认内容(如果有的话)。
-
插槽内容是在父上下文中编译的,但是它们可以访问子上下文中的数据。这是通过作用域插槽实现的,你可以在插槽内容中使用特殊的
<template>
元素,并通过v-slot
指令提供一个可以访问子上下文中数据的模板。
这就是Vue插槽的基本工作原理。插槽是Vue组件系统的一个重要部分,它们提供了一种灵活的方式来组合和重用组件。
二、单个插入结构
子组件
上文略....
<el-table :data="tableData" style="width: 100%">
<slot></slot>
</el-table>
下文略....
父组件中,你可以这样使用ExportRecordsModal
组件,并填充插槽:
<ExportRecordsModal
v-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>
下文略....
父组件
<ExportRecordsModal
v-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>
实现前
实现后