Vue3 slot插槽——(默认插槽、具名插槽、作用域插槽)

一、认识插槽Slot

在开发中,我们会经常封装一个个可复用的组件:

  • 前面我们会通过props传递给组件一些数据,让组件来进行展示;
  • 但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素;
  • 比如某种情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使用组件希望显示的是一张图片;
  • 我们应该让使用者可以决定某一块区域到底存放什么内容和元素;

举个栗子:假如我们定制一个通用的导航组件 - NavBar
在这里插入图片描述

  • 这个组件分成三块区域:左边-中间-右边,每块区域的内容是不固定;
  • 左边区域可能显示一个菜单图标,也可能显示一个返回按钮,可能什么都不显示;
  • 中间区域可能显示一个搜索框,也可能是一个列表,也可能是一个标题,等等;
  • 右边可能是一个文字,也可能是一个图标,也可能什么都不显示;

二、如何使用插槽slot?

这个时候我们就可以来定义插槽slot:

  • 插槽的使用过程其实是抽取共性、预留不同; p我们会将共同的元素、内容依然在组件内进行封装;
  • 同时会将不同的元素使用slot作为占位,让外部决定到底显示什么样的元素;

如何使用slot呢?

  • Vue中将 <slot> 元素作为承载分发内容的出口;
  • 在封装组件中,使用特殊的元素<slot>就可以为封装组件开启一个插槽;
  • 该插槽插入什么内容取决于父组件如何使用;

我们一个组件MySlotCpn.vue:该组件中有一个插槽,我们可以在插槽中放入需要显示的内容;
我们在App.vue中使用它们:我们可以插入普通的内容、html元素、组件元素,都是可以的;
在这里插入图片描述
在这里插入图片描述

三、插槽的默认内容

有时候我们希望在使用插槽时,如果没有插入对应的内容,那么我们需要显示一个默认的内容:
当然这个默认的内容只会在没有提供插入的内容时,才会显示;
在这里插入图片描述

三、多个插槽的效果

我们先测试一个知识点:如果一个组件中含有多个插槽,我们插入多个内容时是什么效果?

  • 我们会发现默认情况下每个插槽都会获取到我们插入的内容来显示;
    在这里插入图片描述

四、具名插槽的使用

事实上,我们希望达到的效果是插槽对应的显示,这个时候我们就可以使用 具名插槽:

  • 具名插槽顾名思义就是给插槽起一个名字,<slot> 元素有一个特殊的 attribute:name;
  • 一个不带 name 的slot,会带有隐含的名字 default;
    在这里插入图片描述

五、动态插槽名

什么是动态插槽名呢?

  • 目前我们使用的插槽名称都是固定的;
  • 比如 v-slot:left、v-slot:center等等;
  • 我们可以通过 v-slot:[dynamicSlotName]方式动态绑定一个名称;
    在这里插入图片描述

六、具名插槽使用的时候缩写

具名插槽使用的时候缩写:

  • 跟 v-on 和 v-bind 一样,v-slot 也有缩写;
  • 即把参数之前的所有内容 (v-slot:) 替换为字符 #;
    在这里插入图片描述

七、渲染作用域

在Vue中有渲染作用域的概念:

  • 父级模板里的所有内容都是在父级作用域中编译的;
  • 子模板里的所有内容都是在子作用域中编译的;

如何理解这句话呢?我们来看一个案例:

  • 在我们的案例中ChildCpn自然是可以让问自己作用域中的title内容的;
  • 但是在App中,是访问不了ChildCpn中的内容的,因为它们是跨作用域的访问;
    在这里插入图片描述

八、认识作用域插槽

但是有时候我们希望插槽可以访问到子组件中的内容是非常重要的:

  • 当一个组件被用来渲染一个数组元素时,我们使用插槽,并且希望插槽中没有显示每项的内容;
  • 这个Vue给我们提供了作用域插槽;

我们来看下面的一个案例:
1.在App.vue中定义好数据
2. 传递给ShowNames组件中
3. ShowNames组件中遍历names数据
4. 定义插槽的prop
5. 通过v-slot:default的方式获取到slot的props
6. 使用slotProps中的item和index
在这里插入图片描述
在这里插入图片描述

九、独占默认插槽的缩写

如果我们的插槽是默认插槽default,那么在使用的时候 v-slot:default="slotProps"可以简写为v-slot="slotProps"
在这里插入图片描述
并且如果我们的插槽只有默认插槽时,组件的标签可以被当做插槽的模板来使用,这样,我们就可以将 v-slot 直 接用在组件上
在这里插入图片描述

十、默认插槽和具名插槽混合

但是,如果我们有默认插槽和具名插槽,那么按照完整的template来编写
在这里插入图片描述
只要出现多个插槽,请始终为所有的插槽使用完整的基于 <template> 的语法:
在这里插入图片描述

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

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

相关文章

dbcc dbreindex server sql_DBCC DBREINDEX重建索引提高SQL Server性能

DBCC DBREINDEX重建索引提高SQL Server性能[转载]大多数SQL Server表需要索引来提高数据的访问速度&#xff0c;如果没有索引&#xff0c;SQL Server要进行表格扫描读取表中的每一个记录才能找到索要的数据。索引可以分为簇索引和非簇索引&#xff0c;簇索引通过重排表中的数据…

Vue动态组件和组件缓存

一、切换组件案例 比如我们现在想要实现了一个功能&#xff1a; 点击一个tab-bar&#xff0c;切换不同的组件显示&#xff1b; 这个案例我们可以通过两种不同的实现思路来实现&#xff1a; 方式一&#xff1a;通过v-if来判断&#xff0c;显示不同的组件&#xff1b; 方式二…

hidl 原理分析_一个 health service 不生效问题引出的一点知识

从 Android P 开始&#xff0c;Google 开始推荐厂家再定制一个 health 。前不久遇到一个定制 health 中的信息未成功反应到 Framework 的问题&#xff0c;在分析解决问题的过程中&#xff0c;学习到了一点新知识&#xff0c;所以就在这篇文章里根据解决问题的流程做一个小小的记…

比较list集合相等的方法

1. 内容相同,不管顺序! public static boolean isListContentEquals(List<String> src, List<String> des){return src.containsAll(des) && des.containsAll(src);} 2.内容和顺序都完全一样 方法1: public static boolean isListsCompletelyEqual(List<…

Webpack的代码分包Vue3中定义异步组件分包refs的使用

一、默认的打包过程&#xff1a; 默认情况下&#xff0c;在构建整个组件树的过程中&#xff0c;因为组件和组件之间是通过模块化直接依赖的&#xff0c;那么webpack在打包时就会将组件模块打包到一起&#xff08;比如一个app.js文件中&#xff09;&#xff1b; 这个时候随着项…

经典JS

用apply把document当作this传入getId函数&#xff0c;帮助“修正”this; document.getElementById (function (func) {return function () {return func.apply(document, arguments);} })(document.getElementById);//调用 var getId document.getElementById; var div getI…

组件的v-model Mixin extends

一、组件的v-model 前面我们在input中可以使用v-model来完成双向绑定&#xff1a; 这个时候往往会非常方便&#xff0c;因为v-model默认帮助我们完成了两件事&#xff1b;v-bind:value的数据绑定 和 input的事件监听&#xff1b; 如果我们现在封装了一个组件&#xff0c;其…

springmvcget中文乱码_解决SpringMVC Controller 接收页面传递的中文参数出现乱码的问题...

新配置一个spring的MVC项目&#xff0c;发现对Get请求的中文参数出现了乱码&#xff1a;查看了SpingMVC中关于编码的配置(在web.xml中)&#xff0c;如下&#xff1a;encodingFilterorg.springframework.web.filter.CharacterEncodingFilterencodingutf-8forceEncodingtrueencod…

SQL学习之SELECT子句顺序

下面来总计下之前的随笔中所说过的所有的SELECT子句的顺序。 子句            说明            是否必须使用 SELECT 要返回的列或者表达式 是 FROM 从中检索数据的表 …

Vue3过渡动画实现

一、认识动画 在开发中&#xff0c;我们想要给一个组件的显示和消失添加某种过渡动画&#xff0c;可以很好的增加用户体验&#xff1a; React框架本身并没有提供任何动画相关的API&#xff0c;所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group&…

linux退出 putty_使用putty远程连接linux防止关闭putty程序就停止

如题&#xff1a;有时候我们使用putty连接linux的时候执行某个命令运行程序的时候&#xff0c;关闭putty就会出现应用程序也关闭的情况&#xff1b;这里建议就使用如下命令nohup youcommand &(&可加可不加)这个时候默认会在你当前目录创建一个nohup中创建一个nohup.out…

在Linux下不使用密码远程登陆其他Linux

有时需要再一台Linux上登陆其他Linux服务器&#xff0c;通常可以直接使用SSH命令&#xff0c;加入两台服务器一台服务器A&#xff0c;IP地址192.168.1.2&#xff0c;另一 台服务器B&#xff0c;IP地址192.168.1.3&#xff0c;如果想从A服务器使用root用户登陆B服务器只需要在A服…

Vue3 Composition API(一)——setup、reactive、ref、readonly

一、Options API的弊端 在Vue2中&#xff0c;我们编写组件的方式是Options API&#xff1a; Options API的一大特点就是在对应的属性中编写对应的功能模块&#xff1b;比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变&#xff0c;也包括生…

pandas 读表格_pandas电子表格的读取(pandas中的read_excel)

上面那篇文章中&#xff0c;初步介绍了一个文本文件的读取&#xff1b;接下来介绍另外一种常见的本地数据格式&#xff0c;那就是Excel电子表格&#xff0c;如果读者在学习或者工作中需要使用Python分析某个Excel表格数据&#xff0c;改如何完成第一个的数据读取呢&#xff1f;…

dex文件格式二

一. dex文件头(1) magic value在DexFile.c dexFileParse函数中 会先检查magic opt啥是magic opt呢? 我们刚刚从cache目录拷贝出来的那个前面的dey 036就是magic opt在源码中会先解析magic opt,然后重设dexfile指针重设magic opt指针后开始解析magic value这 8 个 字节一般是…

Vue3 Composition API(二)——computed、watchEffect、setup中使用ref

一、computed 在前面我们讲解过计算属性computed&#xff1a;当我们的某些属性是依赖其他状态时&#xff0c;我们可以使用计算属性来处理 在前面的Options API中&#xff0c;我们是使用computed选项来完成的&#xff1b;在Composition API中&#xff0c;我们可以在 setup 函数中…

【Git】笔记1

学习廖雪峰Git教程的笔记 Git是什么&#xff1a; Git是目前世界上最先进的分布式版本控制系统 Git与Github的关系&#xff1a;github是一个用git做版本控制的项目托管平台&#xff0c;它为开源项目免费提供Git存储 Git的创建者&#xff1a;Linus&#xff0c;就是创建了linux的那…

支持字典_手把手教你学Python之字典

字典是一种无序可变的容器&#xff0c;字典中的元素都是"键(key):值(value)"对&#xff0c; “键”和“值”之间用冒号隔开&#xff0c;所有“键值对”放在一对大括号“{}”中&#xff0c;元素之间用逗号分隔。在同一个字典中&#xff0c;“键”必须是唯一的&#xf…

Vue3 Composition API(三)——生命周期钩子、Provide函数 和 Inject函数、封装Hook案例、setup顶层编写方式

一、生命周期钩子 我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项&#xff0c;也可以替代 生命周期钩子。 那么setup中如何使用生命周期函数呢&#xff1f; 可以使用直接导入的 onX 函数注册生命周期钩子&#xff1b; 二、Provide函数 和…

单尺度二维离散小波重构(逆变换)idwt2

clc,clear all,close all; load woman; %单尺度二维离散小波分解。分解小波函数haar [cA,cH,cV,cD]dwt2(X,haar); %单尺度二维离散小波重构(逆变换) Yidwt2(cA,cH,cV,cD,haar); figure; subplot(1,2,1),imshow(X,map),title(原始图像); subplot(1,2,2),imshow(Y,map),title(重构…