vue3插槽solt 使用

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

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

一、solt 原理

知其然知其所以然

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

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

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

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

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

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

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

二、单个插入结构

子组件

javascript 复制代码
上文略....

<el-table :data="tableData" style="width: 100%">
  <slot></slot>
</el-table>

下文略....

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

javascript 复制代码
<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>

三、多个插槽

子组件

javascript 复制代码
上文略....

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

下文略....

父组件

javascript 复制代码
<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>

实现前

实现后

相关推荐
再学一点就睡9 分钟前
前端必会:Promise 全解析,从原理到实战
前端·javascript·面试
前端工作日常40 分钟前
我理解的eslint配置
前端·eslint
前端工作日常1 小时前
项目价值判断的核心标准
前端·程序员
90后的晨仔2 小时前
理解 Vue 的列表渲染:从传统 DOM 到响应式世界的演进
前端·vue.js
OEC小胖胖2 小时前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web
烛阴2 小时前
ABS - Rhomb
前端·webgl
植物系青年2 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(下)
前端·低代码
植物系青年2 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(上)
前端·低代码
小小李程序员2 小时前
JSON.parse解析大整数踩坑
开发语言·javascript·json
桑晒.3 小时前
CSRF漏洞原理及利用
前端·web安全·网络安全·csrf