Vue66-vue-默认插槽
一、默认插槽需求

1-1、原本的写法:

在每个category组件中用v-show来做条件渲染,但是不方便!
1-2、默认插槽



img标签,ul标签,video标签,都是在app组件中完成解析之后,塞到category组件中的,所以,他们对应的样式可以都写在app组件中!此时,解析完的结构带着样式塞进组件中;
当然也可以写在category组件中,此时,解析完的结构没有样式,塞到组件中再渲染样式!
二、具名插槽需求

组件中有多个插槽
2-1、具名插槽

2-2、需求优化

或者:

或者:

<template>标签,可以像div一样包裹元素,但是,最终不生成真实的DOM元素。
当写了<template>标签,slot就有了新的写法:


三、作用域插槽


数据不变,但是根据数据所生成的结构变化。结构由使用者决定(app组件)
因为三个组件的数据都是一样的,所以,将数据放到category组件中:

但是,插槽中的样式是由app组件负责的,需要将category组件中的数据games传给app组件

谁往插槽中塞结构,插槽就把数据传给谁

注意:atguigu收到的是一个对象,因为这样,可以传多个值:
总是atguigu.xxxx比较烦,可以用解构赋值:
或者,scope也可以有另一种写法:
四、小结




作用域插槽也能有名字name!
相关文章:
Vue66-vue-默认插槽
一、默认插槽需求 1-1、原本的写法: 在每个category组件中用v-show来做条件渲染,但是不方便! 1-2、默认插槽 img标签,ul标签,video标签,都是在app组件中完成解析之后,塞到category组件中的&…...
tsf-consul的使用
在腾讯云微服务平台TSF中使用Consul作为服务发现组件,通常需要遵循以下步骤: ### 1. 创建应用 首先,您需要在TSF控制台创建一个应用。在创建应用时,选择合适的业务类型、开发语言、开发框架等信息。对于使用Consul作为服务发现组件的Spring Cloud应用,您需要选择“业务应…...
【perl】基本语法 /备忘录/
分享 perl 语言学习资源 Perl 教程|极客教程 (geek-docs.com) Perl [zh] (runebook.dev) Perl 运算符 | 菜鸟教程 (runoob.com) Perl Documentation - Perldoc Browser Search the CPAN - metacpan.org 当然还有一些经典书籍,不再列举。 1、数字 1.1、数字表…...
mongodb 集群安装
整体架构图: 1. 配置域名 Server1: OS version: CentOS Linux release 8.5.2111 hostnamectl --static set-hostname mongo01 vi /etc/sysconfig/network # Created by anaconda hostnamemong01 echo "192.168.88.20 mong1 mongo01.com mongo…...
绿茶集团重启IPO:流量渐退、业绩波动,还能讲出好故事吗?
近日,绿茶集团有限公司(下称“绿茶集团”)向港交所递交上市申请,花旗、招银国际为其联席保荐人。 回望绿茶集团的上市之路,可谓有诸多坎坷。该公司于2021年3月首度向港交所发起冲击,但却将中文版招股书中的“流动负债总额”错写成…...
Git与SSH
Git Git是一种分布式版本控制系统,最初由Linus Torvalds为管理Linux内核开发而设计并开发。Git可以帮助开发团队协作管理代码,跟踪代码变更历史,并在需要时回溯到特定版本。 分布式版本控制:每个开发者都可以拥有完整的代码仓库…...
我的创作纪念日--码农阿豪
个人名片 🎓作者简介:java领域优质创作者 🌐个人主页:码农阿豪 📞工作室:新空间代码工作室(提供各种软件服务) 💌个人邮箱:[2435024119qq.com] 📱…...
Git 学习笔记(超详细注释,从0到1)
Git学习笔记 1.1 关键词 Fork、pull requests、pull、fetch、push、diff、merge、commit、add、checkout 1.2 原理(看图学习) 1.3 Fork别人仓库到自己仓库中 记住2个地址 1)上游地址(upstream地址):http…...
GitLab项目组相关操作(创建项目组Group、创建项目组的项目、为项目添加成员并赋予权限)
天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。 君不见,黄河之水天上来,奔流到海不复回。 君不见,高堂明镜悲白发,朝如青丝暮成雪。 ——《将…...
英语恶补ing
ing的词组都有停下来做某事的感觉了。 second hand是形容词了。 wouldnt buy这里的would是情态动词,也是助动词 助动词不能单独使用,要搭配实义动词,这样才能构成谓语 情态动词(modals)在英语中有多种作用ÿ…...
DS1339C串行实时时钟-国产兼容RS4C1339
RS4C1339串行实时时钟是一种低功耗的时钟/日期设备,具有两个可编程的一天时间报警器和一个可编程方波输出。地址和数据通过2线双向总线串行传输。时钟/日期提供秒、分钟、小时、天、日期、月份和年份信息。对于少于31天的月份,月末的日期会自动调整&…...
神经网络模型---LeNet-5
一、LeNet-5 1.定义LeNet-5模型 model models.Sequential([1.1添加一个二维卷积层,有6个过滤器,每个过滤器的尺寸是5x5。输入图像尺寸是28x28像素,具有1个颜色通道,激活函数是relu layers.Conv2D(6, (5, 5), activationrelu, input_shape…...
免费分享:1994-2020年中国各行业二氧化碳排放数据(附下载方法)
日前,国务院印发《2024—2025年节能降碳行动方案》针对重点领域进行部署,同时明确了制度标准、价格政策、资金支持、科技引领、市场化机制、全民行动等6项措施,为节能降碳提供支撑保障。1994-2020年中国各行业二氧化碳排放数据为评估环境政策…...
Qemu虚拟机在线迁移到VMware
libvirt版本:libvirt-10.0.0qemu版本:qemu-8.2.0 在生产环境中,大多数的场景是 vmware 虚拟机迁移到 qemu 环境,一般是通过关机然后导出、导入磁盘镜像来实现。 如果要将 qemu 环境虚拟机迁移到 vmware 怎么办呢?要求…...
计算机游戏因为d3dcompiler_47.dll丢失无法启动怎么办?解决只要d3dcompiler_47.dll丢失无法启动游戏软件的方法
d3dcompiler_47.dll 是一个动态链接库文件,属于 Microsoft DirectX 的一部分,主要负责编译和运行 3D 图形程序。它是支持 Direct3D 功能的核心组件,Direct3D 是一种用于编程 3D 图形的 API,广泛应用于游戏和图形密集型应用程序中。…...
LDO的原理及测试方法
一、基本结构 这是LM317芯片的核心,这个电路单元称为Bandgap Reference带隙基准源。属于模拟集成电路中的经典电路结构。 LDO拓扑结构图 常见的基本结构 利用VBE的负温度系数,而VT是正温度系数,正负温度系数抵消就的得到稳定的基准参考电压了(三极管的方程VBE=VT*In(lC/IS…...
图论算法学习
图论 dfs是可一个方向去搜,不到黄河不回头,直到遇到绝境了,搜不下去了,再换方向(换方向的过程就涉及到了回溯)。bfs是先把本节点所连接的所有节点遍历一遍,走到下一个节点的时候,再…...
面试题——RabbitMQ
★1.如何保证消息的幂等性?(如何避免消息重复投递) 生产端: 在消息发送前,先查询数据库此消息是否被处理过。处理过则忽略、否则继续处理,并在处理完成后修改状态为已处理。 消费端: 每个消息都生成全局唯一ID或业务I…...
前端开发之浏览器垃圾回收机制
前端开发之浏览器垃圾回收机制 V8引擎,作为Chrome浏览器和Node.js等环境下的JavaScript运行引擎,其垃圾回收机制是确保高效内存管理的关键。 V8垃圾回收机制的深度解析与优化 V8 JavaScript引擎采用了高效的垃圾回收机制,其中核心的实现特…...
less-loader的less转成CSS的底层原理
在现代Web开发中,CSS预处理器如LESS极大地提高了编写样式的效率和灵活性。而less-loader作为webpack的一个加载器,用于将LESS文件转换为CSS文件。本文将深入探讨less-loader如何工作,从解析LESS文件到生成最终的CSS文件的底层原理。 工作流程…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果 {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...
Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...
苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...




