vue3插槽solt 使用

news2024/11/22 11:01:12

 背景增加组件的复用性,个人体验组件化还是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组件,并填充插槽:

<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>

实现前

 实现后

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1685096.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

4月粽子行业线上市场销售数据分析

随着节日庆祝常态化&#xff0c;消费者对礼物消费的态度发生变化&#xff0c;这会影响粽子的消费模式和市场需求。再加上技术进步&#xff0c;如速冻粽子和真空粽子的推广&#xff0c;也极大地推动了粽子行业的发展&#xff0c;使得产品更易于保存和运输&#xff0c;从而满足了…

Spark-RDD-持久化详解

Spark概述 Spark-RDD概述 1.持久化与序列化的关系 在Spark中&#xff0c;持久化&#xff08;Persistence&#xff09;和序列化&#xff08;Serialization&#xff09;是两个关键概念&#xff0c;它们在RDD处理过程中起着重要作用&#xff0c;并且有一定的关联&#xff1a; &a…

Windows安装mingw32/w64

1.下载 MinGW-w64 WinLibs - GCCMinGW-w64 compiler for Windows Releases niXman/mingw-builds-binaries (github.com) MinGW-w64、UCRT 和 MSVCRT 是 Windows 平台上常用的 C/C 运行库&#xff0c;它们有以下不同点&#xff1a; MinGW-w64&#xff1a;是一个基于 GCC 的…

Transformer,革命性的深度学习架构

Transformer 是一种革命性的深度学习架构,专门设计用于处理序列数据,特别是在自然语言处理(NLP)任务中表现卓越。它由 Vaswani 等人在 2017 年发表的论文《Attention is All You Need》中首次提出,打破了当时基于循环神经网络(RNN)和卷积神经网络(CNN)的序列建模常规,…

Golang | Leetcode Golang题解之第108题将有序数组转换为二叉搜索树

题目&#xff1a; 题解&#xff1a; func sortedArrayToBST(nums []int) *TreeNode {rand.Seed(time.Now().UnixNano())return helper(nums, 0, len(nums) - 1) }func helper(nums []int, left, right int) *TreeNode {if left > right {return nil}// 选择任意一个中间位置…

基于Vue的图片文件上传与压缩组件的设计与实现

摘要 随着前端技术的发展&#xff0c;系统开发的复杂度不断提升&#xff0c;传统开发方式将整个系统做成整块应用&#xff0c;导致修改和维护成本高昂。组件化开发作为一种解决方案&#xff0c;能够实现单独开发、单独维护&#xff0c;并能灵活组合组件&#xff0c;从而提升开…

Leetcode861. 翻转矩阵后的得分

Every day a Leetcode 题目来源&#xff1a;861. 翻转矩阵后的得分 解法1&#xff1a;贪心 对于二进制数来说&#xff0c;我们只要保证最高位是1&#xff0c;就可以保证这个数是最大的&#xff0c;因为移动操作会使得它取反&#xff0c;因此我们进行行变化的时候只需要考虑首…

【Android安全】AOSP版本对应编号| AOSP版本适配Pixel或Nexus型号 | 驱动脚本下载地址

AOSP版本对应编号 https://source.android.com/docs/setup/about/build-numbers?hlzh-cn#source-code-tags-and-builds 例如android-8.1.0_r1 对应的编号是OPM1.171019.011 可以适配Pixel 2 XL AOSP驱动脚本下载 编译AOSP时&#xff0c;需要Google的驱动&#xff0c;后面才…

C++——类与对象(下)

​ 【本节内容】 目录 1. 再谈构造函数 2. static成员 3. 友元 4. 内部类 5.匿名对象 6.拷贝对象时的一些编译器优化 7. 再次理解类和对象 1. 再谈构造函数 1.1 构造函数体赋值 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给对象中各个成员变量一个合…

HTML用法介绍

文章目录 一、HTML概念和模版二、常用标签及用法1.p标签2.span标签3.h标签4.hr标签5.img标签6.a标签7.input标签8.table标签 一、HTML概念和模版 HTML的全称为超文本标记语言&#xff0c;它包括一系列标签组成&#xff0c;模版及各部分注释如下&#xff1a; <!--声明文档类…

从需求角度介绍PasteSpider(K8S平替部署工具适合于任何开发语言)

你是否被K8S的强大而吸引&#xff0c;我相信一部分人是被那复杂的配置和各种专业知识而劝退&#xff0c;应该还有一部分人是因为K8S太吃资源而放手&#xff01; 这里介绍一款平替工具PasteSpider&#xff0c;PasteSpider是一款使用c#编写的linux容器部署工具(使用PasteSpider和…

如何将Windows PC变成Wi-Fi热点?这里提供详细步骤

序言 Windows 10和Windows 11都有内置功能,可以将你的笔记本电脑(或台式机)变成无线热点,允许其他设备连接到它并共享你的互联网连接。以下是操作指南。 由于Windows中隐藏的虚拟Wi-Fi适配器功能,你甚至可以在连接到另一个Wi-Fi网络或无线路由器时创建Wi-Fi热点,通过另…

CSS学习笔记之高级教程(二)

10、CSS 3D 转换 通过 CSS transform 属性&#xff0c;您可以使用以下 3D 转换方法&#xff1a; rotateX()rotateY()rotateZ() 10.1 rotateX() 方法&#xff08;使元素绕其 X 轴旋转给定角度&#xff09; <!DOCTYPE html> <html lang"en"><head&g…

NLP(17)--大模型发展(1)

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 大模型的演化&#xff1a; ElMO : 类似双向lstm 结果和词向量拼接 预训练鼻祖 GPT :使用了Transformer 模型 开始使用Token &#xff08;发现预训练的作用&#xff09; Bert&#xff1a;认为双向比单向好 MLM(双向) 优于 LT…

ARP基本原理

相关概念 ARP报文 ARP报文分为ARP请求报文和ARP应答报文&#xff0c;报文格式如图1所示。 图1 ARP报文格式 Ethernet Address of destination&#xff08;0–31&#xff09;和Ethernet Address of destination&#xff08;32–47&#xff09;分别表示Ethernet Address of dest…

Linux中解决普通用户使用不了sudo问题

目录 sudo的使用场景sudo使用不了的原因解决方法 sudo的使用场景 之前我们介绍了文件的权限问题 如果一个普通用户想去执行一个它命令之外的权限&#xff0c;只能使用sudo 比如普通用户使用yum去安装软件&#xff0c;需要sudo yum xxxx sudo使用不了的原因 这里我们用普通用户…

浏览器的下载行为基本原理

浏览器解析 在使用浏览器访问某些资源时&#xff0c;有些资源是直接下载有些资源是直接打开。例如前端的html&#xff0c;xml&#xff0c;css&#xff0c;图片等资源都是直接打开&#xff0c;而txt&#xff0c;excel等文件是直接下载。那么如何控制访问一个资源时是下载文件还…

C# run Node.js

C# run nodejs Inter-Process Communication&#xff0c;IPC Process类 启动Node.js进程&#xff0c;通过标准输入输出与其进行通信。 // n.js// 监听来自标准输入的消息 process.stdin.on(data, function (data) {// 收到消息后&#xff0c;在控制台输出并回复消息console.l…

MyBatisPlus标准分页功能制作,以及设置分页拦截器,selectPage(new Page<>(current,size),null)

目录 1、设置分页拦截器 2、创建数据库及表 3、pom.xml 4、添加MP的相关配置信息 application.yml 5、根据数据库表创建实体类 User 6、创建 UserDao 接口 7、编写引导类 8、编写测试类 9、Run的运行结果 1、设置分页拦截器 package com.example.config; import com.baomidou.m…

从零开始傅里叶变换

从零开始傅里叶变换 1 Overview2 傅里叶级数2.1 基向量2.2 三角函数系表示 f ( t ) f(t) f(t)2.2.1 三角函数系的正交性2.2.2 三角函数系的系数 2.3 复指数函数系表示 f ( t ) f(t) f(t)2.3.1 复指数函数系的系数2.3.2 复指数函数系的正交性 2.4 傅里叶级数总结 3 傅里叶变换…