Vue组件-插槽

news2024/12/24 2:39:48

一、插槽

1. 组件的三大核心:属性(data、props)、事件、插槽

 2. 插槽(slot)

       插槽(slot)将父组件的内容与子组件的模板相混合,从而弥补了视图的不足。

       插槽的目的:使组件具有更好的扩展性。

       如果父组件没有插入内容,那么 slot 的内容就作为默认出现;若父组件插入了内容,则 slot 的内容将被插入的内容替换掉     

       组件的封装方式:抽取共性、保留不同

二、插槽的使用方式

       1. vue2.6以前的版本

       ​ A、匿名插槽(默认插槽):一个组件中有且只能有一个

<div>
    <h2>子组件</h2>
    <slot></slot> <!-- 匿名插槽:预留的位置,具体放什么元素由该组件的使用者决定-->
    <p>学苑录</p>
  </div>

       B、具名插槽:给插槽命名

        ​ C、作用域插槽:父组件显示不同的页面结构,页面中的数据来自于子组件

       2.Vue2.6以后的版本:插槽使用统一的新的语法(指令),用来取代 和slot-scope

​        A、匿名插槽(默认插槽):在父组件中使用v-slot指令

       B、具名插槽:和原版本相同

​       C、作用域插槽

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

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

相关文章

ConstraintLayout2

ConstraintLayout2ImageFilterView 属性 app:altSrc&#xff1a;altSrc提供的资源将会和src提供的资源通过crossfade属性形成交叉淡化效果。默认情况下,crossfade0&#xff0c;altSrc所引用的资源不可见,取值在0-1app:saturation&#xff1a;float型&#xff0c;默认1&#xf…

FPGA知识汇集-时钟系统的移植

ASIC 和FPGA芯片的内核之间最大的不同莫过于时钟结构。ASIC设计需要采用诸如时钟树综合、时钟延迟匹配等方式对整个时钟结构进行处理&#xff0c;但是 FPGA设计则完全不必。因为后者有内建的时钟资源:锁相环、频率综合器、移相器&#xff0c;以及具有低延迟特性的专用时钟布线网…

Unity基于状态机的架构与设计

我们做游戏的时候经常会有流程控制&#xff0c;流程控制的方法有很多&#xff0c;行为决策树&#xff0c;状态机等。本质差别都不大&#xff0c;就是把每一段执行逻辑做成一个一个的节点&#xff0c;根据条件执行某个节点&#xff0c;切换到某个节点。今天给大家分享一下基于状…

如何在VSCode中添加Python解释器并安装Python库

如何在VSCode中添加Python解释器并安装Python库作者介绍一&#xff0e; 安装VScode编辑器二&#xff0e; 安装Python解释器三&#xff0e; 在VScode中添加Python解释器四&#xff0e; 创建项目并在VScode中打开&#xff1b;五、在VScode中安装Python库作者介绍 孟莉苹&#xf…

【TypeScript入门】TypeScript入门篇——对象

对象其实就是一种封装的概念&#xff0c;它把事物封装成一个类&#xff0c;然后提供类的接口&#xff0c;而具体的过程人们是看不到的。 一、对象实例 二、TypeScript 类型模板 三、鸭子类型(Duck Typing) 对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等&am…

Linux常用命令——lsof命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) lsof 显示Linux系统当前已打开的所有文件列表lsof -p pid 补充说明 lsof命令用于查看你进程打开的文件&#xff0c;打开文件的进程&#xff0c;进程打开的端口(TCP、UDP)。找回/恢复删除的文件。是十分方便的系…

十四、Node.js 中 session验证登录

在前一篇内容中讲到这个cookie实现验证登录&#xff0c;cookie是存储在客户端的&#xff0c;而session是存储在服务器的&#xff0c;相比较session的安全性会更高&#xff0c;session对象存储特定用户会话所需要的属性以及配置信息&#xff0c;服务通过session对象将用户的信息…

CPU使用率过高的原因及解决方法

常见的CPU使用率过高可不是职场CPU哦&#xff0c;而是电脑的中央处理器&#xff0c;CPU作为计算机系统重要的运算和控制核心&#xff0c;可谓是“很忙”的存在。在我们日常使用电脑设备时&#xff0c;由于打开的软件、游戏、网页等程序容易导致电脑运作卡顿&#xff0c;这时候就…

《图机器学习》-Traditional Methods for Machine Learning in Graphs

Traditional Methods for Machine Learning in Graphs前言一、Node-Level Tasks and Features二、Link-Level Tasks and Features三、Graph-Level Tasks and Features前言 图机器学习任务可以分为三种&#xff1a; Node-level prediction&#xff1a;节点级的预测 如对节点进…

最优控制学习笔记3----无约束条件的泛函极值问题

无约束条件的最优控制问题 设函数 x(t)x(t)x(t) 在 [t0,tf][t_0, t_f][t0​,tf​] 区间上连续可到&#xff0c;考虑 Lagrange型性能指标函数 J[x(t)]∫t0tfL[x(t),x˙(t),t]dtJ[x(t)]\displaystyle\int_{t_0}^{t_f}L[x(t), \dot{x}(t), t]dtJ[x(t)]∫t0​tf​​L[x(t),x˙(t),…

Linux---常见指令

目录 01. ls 指令 02. pwd命令 03. cd 指令 04. touch指令 05.mkdir指令 06.rmdir指令 && rm 指令 07.man指令 08.cp指令 09.mv指令 10. cat指令 11.more指令 12.less指令 13.head指令 13.tail指令 简述重定向和管道概念&#xff1a; 14.时间相关的指令 15.Ca…

Git Fork操作与配置

我理解的git fork&#xff1a;将别人&#xff08;张三&#xff09;仓库包括文件&#xff0c;提交历史&#xff0c;issues等复制一份到自己的github账号下。我们在可以通过修改本地项目的代码&#xff0c;然后&#xff0c;给&#xff08;张三&#xff09;发送一个Merge Request&…

C. Yet Another Tournament(贪心)

Problem - C - Codeforces 通用领域 医学 计算机 金融经济 你正在参加另一场比赛。有n1个参与者:你和其他n个对手&#xff0c;编号从1到n。 每两名参与者将相互竞争一次。如果对手i和对手j比赛&#xff0c;他获胜当且仅当i>j。 当我的对手和你对弈时&#xff0c;一切都变…

rabbitmq+netcore6 【4】Routing:路由

文章目录1&#xff09;前言2&#xff09;Direct exchange 直接类型的交换机3&#xff09;Multiple bindings 多绑定4&#xff09;Emitting logs 发送日志5&#xff09;Subscribing 订阅6&#xff09;综合以上代码准备工作生产者消费者1消费者2消费者3运行结果官网参考链接&…

USB大容量存储设备浅析

一 USB 设备类 SB 引入了设备类的概念&#xff0c;根据每一类驱动程序的功能将USB设备分为几大类&#xff0c;标准的几大类包括&#xff1a; 大容量存储类 网络类 集线器类 串行转换器 音频类 视频类 图像类 调制解调器 打印机 HID(Human Interface Device 人机接口设备)每一…

我记不住的那些编程语言的语法(数组)-1

背景&#xff1a;我记不住各种语言的语法&#xff0c;例如C、Java、Go、Python、JavaScript&#xff0c;大概就是常用的这几种语言&#xff0c;每种语言有其自己的语法规范&#xff0c;有的时候会记混了&#xff0c;所以想记录一下细节。这个系列会不定期的更新&#xff0c;本期…

一路坎坷,入局到突破【2022年度总结】

秃秃 1> 来到CSDN&#xff1a; 2019年5月时决定只身一人去外省实习&#xff0c;顺便在CSDN这个“资源库”注册了一下账号。直到我20年在公司做技术分享时&#xff0c;才真正开始在CSDN上的创作&#xff1b; 21年的时候也只是把CSDN当做笔记&#xff0c;就自己写一写&…

行业洞察|猴子可以打字,动物走进元宇宙还有多远?

很多学者和专家认为&#xff0c;人类与动物的区别在于语言的使用。人类可以使用语言&#xff0c;但是动物不会。其实也许是我们人类听不懂动物的语言&#xff0c;并不是他们不会使用。本质在于沟通的媒介不同&#xff0c;导致我们无法相互交流。但是&#xff0c;埃隆马斯克&…

App原型设计规范

一、界面尺寸 1.ios分辨率 2.android界面尺寸 ① 安卓分辨率 ②常见安卓手机分辨率及尺寸 一般情况下大家在设计app端原型的时候&#xff0c;由于现在ios和安卓慢慢在趋向一致&#xff0c;所以基本上都只会设计一套原型&#xff0c;尺寸方面一般都是按照iphone6的750*1344(2倍…

Django 数据备份dumpdata 踩的坑

项目背景&#xff1a; 项目使用的是sqlite数据库&#xff0c;要求备份除了网络表之外的所有数据 实施方案&#xff1a; python3 manage.py dumpdata --exclude network.TRoute --indent 2 --format json > aq3.json 方案操作结果是&#xff1a; 查看aq3.json如下&#xff…