当前位置：首页 > news >正文

vue3插槽solt 使用

news 来源：原创 2025/5/1 4:09:30

背景增加组件的复用性，个人体验组件化还是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>

实现前