插槽的使用教程（普通插槽、具名插槽、域名插槽）

2024-06-22 21:36:32

**

插槽的存在极大地提高了组件的复用性

**
一、普通插槽
(1)新建一个组件Slots并引入到父组件App中,且效果如下

(2)此时我在Slots组件内加入h2标签的足球，但页面上还是没有效果

（3）但当我们在Slots组件内加入slot标签时，这时的效果如下

此时普通插槽的效果就出来了
二、当我们想在使用同一个组件显示不同内容时，这时我们就需要用到具名插槽

怎样通过左边的代码来实现右边的效果
（1）此时我们通过为子组件的slot标签的属性name赋值对应的名字，
再在父组件使用子组件，且需要展示不同内容的标签添加slot属性，赋值和name对应的名字

此时效果如下

(2)我们还可以对上面代码进行优化

三、域名组件
(1)都知道在使用子组件的父组件中，如果使用插槽的形式调用父组件中的数据，是很容易调用的，看下图
但当我们在上图的APP.vue中的li想显示Slot.vue组件中的数据，这时要怎样实现呢？
(2)下面我们将用域名插槽来实现，如下图

我们先将Slots组件中的数据groups通过:name="groups"的形式绑定在slot标签身上，再在App.vue组件中在需要使用groups数据的最大容器身上，通过
绑定slot-scope="name"的方式来获取groups数据，此时name的内容为图中第三处，进而可以对数组进行遍历
（不能和具名插槽一起使用）

希望您能够三连，支持作者（如有错误，望提出你宝贵的意见）

插槽的使用教程（普通插槽、具名插槽、域名插槽）相关推荐

【vue3】使用JSX实现普通、具名和作用域插槽
最近在vue3构建的项目中使用到了JSX(不得不说JSX用起来的感觉就是清爽).但是前段时间遇到了一个问题,vue template中的slot插槽如何在JSX中实现呢?查了很久资料.文档都很难找到一 ...
最详细的教程，freenom免费顶级域名注册及错误解决
第一步:准备工作你需要设法加载谷歌验证码第二步:注册打开官网https://www.freenom.com/zh/index.html?lang=zh,输入你想要的域名,4位及以上的是免费的,输 ...
xrea mysql密码_Xrea日本老牌免费空间申请和使用教程:1GB空间可绑域名_免费PHP空间 | 微站中国|MicroHost...
Xrea这是一个老牌的日本免费空间,稳定运行了十年以上,相信一些玩免费空间的资深玩家和一些老站长都或许都曾经用过Xrea空间,Xrea空间服务器多达几百个,且全部在日本,连接国内速度快,成立众多免费空 ...
采用pci的插槽计算机,同三维高清视频采集卡使用PCI-E插槽的优势
同三维高清视频采集卡中大多采用的是PCI-E插槽接口,其传输带宽速度等相对于PCI插槽有了很大的进步,对于高清视频信号的采集和传输是非常有好处的.如现在电脑屏幕信号采集.高清摄像机信号采集等在应用上都 ...
【服务器搭建个人网站】教程三：怎样购买域名并怎样进行域名解析来啦
前言购买一台服务器,再来个域名,搭建一个自己的个人博客网站,把一些教程.源码.想要分享的好玩的放到网站上,供小伙伴学习玩耍使用.我把这个过程记录下来,想要尝试的小伙伴,可以按照步骤,自己尝试一下~ ...
新手教程:用.htaccess实现二级域名功能
我开通了一个独立IP linux空间,空间支持伪静态功能.由于网站根目录下安装的是DEDECMS,bbs目录下安装的是论坛,home目录下安装是ucenterHome,虚拟主机只支持根目录绑定域名,如 ...
[图文教程]阿里云万网域名一键签发SSL证书快捷申请免费SSL证书
前段时间不止一个用户在开发者论坛询问阿里云的免费证书无法购买了,经过在版主群里面的讨论和实践,并不是停止提供免费的SSL证书,而是在购买云盾证书服务中,需要先选择"Symantec" ...
Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）
一.认识插槽Slot 在开发中,我们会经常封装一个个可复用的组件: 前面我们会通过props传递给组件一些数据,让组件来进行展示: 但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定 ...
react具名插槽与作用域插槽
// 插槽的使用,首先插槽是在组件标签内部组合的 JSX 内容,进行传递 // 因为 JSX 本身就是一个类 js 对象, 插槽直接使用 props.children 拿到了 JSX 直接渲染到 ...

最新文章

热门文章