11 vue3之插槽全家桶
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。
匿名插槽
1.在子组件放置一个插槽
<template><div><slot></slot></div>
</template>
父组件使用插槽
在父组件给这个插槽填充内容
<Dialog><template v-slot><div>2132</div></template></Dialog>
具名插槽
具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中
<div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>
父组件使用需对应名称
<Dialog><template v-slot:header><div>1</div></template><template v-slot><div>2</div></template><template v-slot:footer><div>3</div></template></Dialog>
插槽简写
<Dialog><template #header><div>1</div></template><template #default><div>2</div></template><template #footer><div>3</div></template></Dialog>
作用域插槽
作用域插槽由子组件暴露值出来
在子组件动态绑定参数 派发给父组件的slot去使用
<div><slot name="header"></slot><div><div v-for="item in 100"><slot :data="item"></slot></div></div><slot name="footer"></slot></div>
通过结构方式取值
<Dialog><template #header><div>1</div></template><template #default="{ data }"><div>{{ data }}</div></template><template #footer><div>3</div></template></Dialog>
动态插槽
插槽可以是一个变量名
<template><h2>动态插槽动态更改插槽名</h2><Ten><template #[name]><div>我在哪儿</div></template></Ten>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import Ten from "./components/ten.vue";
// let name = ref("header");
let name = ref("footer");
// let name = ref("default");
</script>
子组件
<template><div class="header"><slot name="header"></slot></div><div class="main"><slot></slot></div><div class="footer"><slot name="footer"></slot></div>
</template><style lang="scss" scoped>
div {width: 100%;height: 100px;
}
.header {background: antiquewhite;
}
.main {background: aqua;
}
.footer {background: pink;
}
</style>
效果图:

12 vue3之异步组件&代码分包&内置组件suspense和teleport-CSDN博客文章浏览阅读23次。12 vue3之异步组件&代码分包&内置组件suspense和teleporthttps://blog.csdn.net/qq_37550440/article/details/142329387?sharetype=blogdetail&sharerId=142329387&sharerefer=PC&sharesource=qq_37550440&spm=1011.2480.3001.8118
相关文章:
11 vue3之插槽全家桶
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。 匿名插槽 1.在子组…...
Excel 基础知识-操作手册1
Excel基础操作知识 一、工作窗口的视图控制 1、创建新窗口:依次点击【视图】----【新建窗口】命令,即可为当前工作簿创建新的窗口。在原有的工作簿中更改标题或表格内容时,新建的工作簿也会相应的更改。 2、窗口切换:在【视图】…...
Python 类的继承
Python 的代码组织如下: moudle:模块,和实例名和函数都是小写加下划线的方法表示。 class:类,使用首字母大写驼峰的写法表示。 类里面包含类的属性,__init__ ()方法和类的方法。 __init__() 方法在类的创建…...
gRPC介绍
gRPC 是一个由谷歌开发的现代开源高性能 RPC 远程过程调用( Remote Procedure Calls)框架,具备良好的兼容性,可在多个开发环境下运行。 相较于目前主流的 HTTP API 接口,gRPC 接口采用了领先的 HTTP/2 底层架构设计作…...
Git之误执行git rm -r解决方案(六十七)
简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【…...
html文件指什么
HTML 文件指的是超文本标记语言文件(HTML,HyperText Markup Language),它是用于构建网页内容的文件格式。HTML 文件包含一系列的标签(tags),这些标签用于定义网页的结构和元素,例如文…...
AAAI2024--频谱在多模态表示和融合中的作用更为有效:A Multimodal Spectrum Rumor Detector
https://github.com/dm4m/FSRU 多模态内容,如将文本与图像混合,对社交媒体中的谣言检测提出了重大挑战。现有的多模态谣言检测侧重于在空间和序列位置之间混合令牌进行单模态表示,或者在模态间融合谣言真实性的线索。然而,它们受…...
【Python报错已解决】SyntaxError invalid syntax
🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 专栏介绍 在软件开发和日常使用中,BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…...
CI/CD持续集成和持续部署以及相关软件的使用
目录 一:CI/CD是什么? 1.1 持续集成(Continuous Integration) 1.2 持续部署(Continuous Deployment) 1.3 持续交付(Continuous Delivery) CI/CD 的好处包括: 二:git…...
Charles mac电脑配置
安装 Charles: 如果你还没有安装 Charles,可以从官方网站下载安装包并按照提示完成安装。 启动 Charles: 安装完成后,启动 Charles 应用程序。 设置 Charles 代理: Charles 默认的代理端口是 8888。你可以通过以下步…...
FPGA基本结构和简单原理
前言: FPGA全程为(Field Programmable Gate Array)现场可编程逻辑阵列,以基本的逻辑为主可以实现大多数芯片可以实现的功能,比如说:ASIC芯片等,在半导体领域有着重要的作用。 本文…...
【machine learning-七-线性回归之成本函数】
监督学习之cost function 成本函数权重、偏置如何实现拟合数据成本函数是如何寻找出来w和b,使成本函数值最小化? 在线性回归中,我们说到评估模型训练中好坏的一个方法,是用成本函数来衡量,下面来详细介绍一下 成本函数…...
Stable Diffusion Fooocus批量绘图脚本
当当当挡~,流动传热数值计算之余发布点AIGC相关文章,希望大家能喜欢~ 1 Stable Diffusion各种UI分析对比 提示:此部分主要是对SD各种界面的简要介绍和对比,只关注Fooocus批量绘图的读者可直接跳到第二部分。 Stable Diffusion …...
Web 安全基础教程:从零基础入门到精通
一、Web 安全概述 (一)Web 安全的定义与重要性 1.定义 Web 安全是指保护 Web 应用程序免受各种网络威胁,确保 Web 服务的保密性、完整性和可用性。在当今数字化时代,Web 应用广泛存在于各个领域,从电子商务到社交媒…...
ubuntu 20.04 ‘Wired Unmanaged‘ 网络无法配置解决方法
问题描述 系统:ubuntu20.04连上网线后右上角没有有线网络连接的图标,在网络配置界面也只有VPN和无线网络的配置;实际上此时电脑已经连接网络,通过DHCP获得IP地址可以正常访问网络。 解决办法 ubuntu有有两套网络管理软件:serve…...
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
图形验证码是网站安全防护的重要组成部分,能有效防止自动化脚本进行恶意操作,如何实现一个简单的运算图形验证码?本文封装了一个简单的js类,可以用于生成简单但安全的图形验证码。它支持自定义验证码样式,包括字体大小…...
SQL Server 语句日期格式查找方法
1. SQL Server中,处理日期格式和查找特定日期格式方法示例 在SQL Server中,处理日期格式和查找特定日期格式的记录是一个常见的需求。SQL Server提供了多种函数和格式选项来处理和比较日期。以下是一个详细的示例,展示了如何根据特定日期格式…...
【Python报错已解决】python setup.py bdist_wheel did not run successfully.
🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 专栏介绍 在软件开发和日常使用中,BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…...
查询结果是1条记录,但执行更新却是2条记录原因查找
1、问题 在 sqlserver2008 数据库 select * from userinfo WHERE username SP4267ED2409011; 查询结果是1条记录,但执行更新 UPDATE userinfo SET qt qt 2.0 WHERE username SP4267ED2409011; 结果是这样的 Affected rows: 1 Affected rows: 1 返回了2个&#x…...
校园网站的管理与建设心得体会
随着时代发展的需要,学校网站建设如雨后春笋般的涌现出来。在这股大潮的带动下我校校园网网站建设也逐步开展深入。通过数年的发展,我校的校园网建设取得了长足发展,架构了数字化交流平台,整理了专题学习网站资源,开设…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
算法笔记2
1.字符串拼接最好用StringBuilder,不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
