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>

实现前

实现后

相关推荐
小蜜蜂嗡嗡2 小时前
【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】
前端·javascript·flutter
伍哥的传说3 小时前
Vue 3 useModel vs defineModel:选择正确的双向绑定方案
前端·javascript·vue.js·definemodel对比·usemodel教程·vue3.4新特性·vue双向绑定
胡gh8 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh9 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴9 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_9 小时前
TailWind CSS
前端·css·postcss
烛阴10 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧10 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment11 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点11 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端