vue插槽使用总结

news/2024/4/18 18:49:58

  • 什么是插槽
  • 解决什么问题
  • 插槽的分类
    • 默认插槽
    • 具名插槽
    • 作用域插槽

什么是插槽

插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。

解决什么问题

在父组件中引用的子组件的同时,希望在子组件的指定位置插入一段内容,

插槽的分类

默认插槽

默认插槽顾名思义就是默认中的,默认的插槽为直接写在子组件标签内部的,在子组件中用slot标签接收

在子组件中放入一个占位符
在这里插入图片描述
在父组件中给这个占位符填充内容

在这里插入图片描述
展示的效果
在这里插入图片描述
思考: 如果子组件中没有放插槽,同样的父组件中在子组件中填充内容,会出现什么问题?

在这里插入图片描述
在这里插入图片描述
效果:
在这里插入图片描述
总结:
如果子组件没有使用插槽,父组件如果需要往子组件中填充模板或者html, 是没法做到的

具名插槽

具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。

子组件的代码,设置了两个插槽(header和footer):
在这里插入图片描述
父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中

在这里插入图片描述
展示效果
在这里插入图片描述
总结:
父组件填充内容时,是可以根据这个名字把内容填充到对应插槽中的,即使父组件对插槽的填充的顺序打乱,只要名字对应上了,就可以正确渲染到对应的插槽中。

作用域插槽

作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

使用方法:

子组件存放一个带数据的插槽: userInfo和jobInfo、lookInfo是子组件传给父组件的参数

<template><div><h3>这是作用域插槽 - 子组件</h3><p>作用域插槽内容展示部分</p><div><h4>默认插槽,其实默认插槽也是name="default"的一个具名插槽的简写</h4><slot :sonMsg="sonMsg"></slot><hr><slot name="nameSlot"></slot><hr><h4>多个参数</h4><slot name="userInfo":userInfo="{name: name, age, isWeading}":jobInfo="{work, workAge, motto}":lookInfo="{height, weight}"></slot></div></div>
</template><script>
export default {data () {return {sonMsg: '这是子组件中的内容信息',name: '赵二丫',age: 28,isWeading: 'No',work: "程序员",workAge: "n多年",motto: "地球不爆炸,我们不放假",height: '165cm',weight: '100kg'}},
}
</script><style lang="scss" scoped>
</style>

父组件通过 老版本(即为vue2.6.0之前的)中使用slot-scope来接收子组件传过来的插槽数据,新版本则更简单,再根据插槽数据来填充插槽的内容

<template><div class="conteiner"><h2>这是作用域插槽 - 作用域插槽父组件</h2><p style="color: #f00;">作用域插槽为在插槽中,为父元素的环境,想使用子组件环境中的变量,算是插槽的传值方式</p><p>作用域插槽子组件调用,以及作用域插槽的使用</p><hr /><div><son><template v-slot="sonMsgProp"><h3>首先是默认插槽</h3><div>在父组件中的信息:{{msg}}</div><div>这是子组件中的信息: {{sonMsgProp.sonMsg}}</div></template><template #nameSlot="sonMsgProp"><h3>然后是具名插槽</h3><p>具名插槽的简单使用</p><div>在父组件中的信息:{{msg}}</div><div>这是子组件中的信息: {{sonMsgProp.sonMsg}}</div></template><template #userInfo="{userInfo, jobInfo, familyInfo={members: '未知'}, lookInfo: goddesInfo}"><h3>传入多个参数</h3><p>传入多个参数,可以使用解构的方式传入,当然也可以设置默认值和设置别名,在传入的值不存在时候会用默认的值</p><dl><dt>个人信息</dt><dd>姓名:{{userInfo.name}}</dd><dd>年龄:{{userInfo.age}}</dd><dd>已婚:{{userInfo.isWeading}}</dd></dl><dl><dt>工作信息</dt><dd>工作:{{jobInfo.work}}</dd><dd>工龄:{{jobInfo.workAge}}</dd><dd>格言:{{jobInfo.motto}}</dd></dl><dl><dt>家庭情况</dt><dd>家庭成员:{{familyInfo.members}}</dd></dl><dl><dt>身体情况</dt><dd>升高:{{goddesInfo.height}}</dd><dd>体重:{{goddesInfo.weight}}</dd></dl></template></son></div></div>
</template><script>
import Son from './Son.vue';
export default {components: {Son,},data () {return {msg: '这是父组件中的信息'}},
}
</script><style lang="scss" scoped>
</style>

如果子组件中的某一部分的数据,每个父组件都会有自己的一套对该数据的不同的呈现方式,这时就需要用到作用域插槽。


http://www.ppmy.cn/news/101270.html

相关文章

【Netty】一行简单的writeAndFlush都做了哪些事(十八)

文章目录 前言一、源码分析1.1 ctx.writeAndFlush 的逻辑1.2 writeAndFlush 源码1.3 ChannelOutBoundBuff 类1.4 addMessage 方法1.5 addFlush 方法1.6 AbstractNioByteChannel 类 总结 前言 回顾Netty系列文章&#xff1a; Netty 概述&#xff08;一&#xff09;Netty 架构设…

Linux——http协议1

目录 URL http协议 http请求 http响应 细节优化 makefile HttpServer.hpp HttpServer.cc Util.hpp

Hack The Box - 关卡Dancing

SMB(全称是Server Message Block)是一个协议名&#xff0c;可用于在计算机间共享文件、打印机、串口等&#xff0c;电脑上的网上邻居就是靠它实现的。 SMB 是一种客户机/服务器、请求/响应协议。通过 SMB 协议&#xff0c;客户端应用程序可以在各种网络环境下读、写服务器上的…

软考A计划-试题模拟含答案解析-卷八

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…

若依源码解析:代码生成ruoyi-generator

文章目录 摘要代码生成器的使用数据库连接配置数据库表设计代码生成器配置修改mybatis别名配置&#xff0c;增加对com.cyl包名的识别修改mybatis的mapper扫描包路径 代码生成代码输出模板配置 代码生成器原理模板引擎&#xff1a;Velocity使用Velocity模板引擎的一般流程模板语…

Java设计模式-解释器模式

简介 设计模式是软件开发中重要的概念之一&#xff0c;它们为我们提供了可重用、灵活和可扩展的解决方案。在Java领域中&#xff0c;解释器模式是一种强大的设计模式&#xff0c;它能够将复杂的问题拆分成简单的表达式&#xff0c;并提供一种灵活的方式来解释和执行这些表达式…

律师使用ChatGPT 进行法律文献检索提交了错误信息;李开复表示,威力强大的大模型将彻底变革人工智能

&#x1f680; 一名律师使用ChatGPT 进行法律文献检索提交了错误信息 近日&#xff0c;一名律师在法庭案件中使用聊天机器人 ChatGPT 进行法律文献检索&#xff0c;结果提交了错误信息&#xff0c; 揭示了人工智能在法律领域的潜在风险&#xff0c;包括误传错误信息。 该事件…

数字化时代,企业面临哪些共同的挑战?

在这种全新的社会、商业环境下&#xff0c;各行各业的企业都开始寻求探索新的商业模式&#xff0c;通过转型适应当前时代的转变&#xff0c;促进业务健康持续的发展。所以数字化成为了企业进行转型的工具&#xff0c;也成为了众多领域内企业对未来的共识。 一、管理挑战 ●经…

Logisim 头歌 偶校验编码设计图解及代码(计算机组成原理)

努力是为了不平庸~ 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。 急的同学请直接点击目录跳到下方解答处&#xff01;&#xff01; 目录 图解&#xff1a; 代码题解&#xff08;免费&#xff09;&#xff1a; 实…

做外贸算运费的时候需不需要多算一些

看到一个网友在一篇文章下留言说&#xff1a;客户算运费的时候需不需要多算一些 听公司老员工说给客户算运费要多加20% 这样合适吗 我个人感觉有点离谱。 那我们就这个话题&#xff0c;谈一谈运费是否要多加一些呢&#xff1f;为什么要多加一些&#xff1f; 首先&#xff0c;要…

swagger页面 doc.html出不来,swagger-ui/index.html能出来

swagger页面 doc.html出不来&#xff0c;swagger-ui/index.html能出来。前前后后折腾了很久&#xff0c;jar包冲突&#xff0c;jar包版本&#xff0c;添加路径啥的都弄了&#xff0c;就是出不来。 后来全局搜索“doc.html”页面发现能出来的项目能搜到这个页面&#xff1a; 定…

springboot+vue+java旅行旅游景点酒店预订出行订票系统eaog5

线上旅行信息管理系统要求实现以下功能&#xff1a; a.景点管理&#xff0c;展示景点的基础信息&#xff0c;介绍等信息。 b.酒店管理,展示酒店的基础信息&#xff0c;介绍等信息。 c.评价管理&#xff0c;可以查看景点或酒店的相关评价信息&#xff0c;客户消费完&#xff0c;…

实时频谱-3.1实时频谱分析仪测量

RSA 测量类型 泰克RSA 可以在频域、时域、调制域和统计域中工作。 频域测量 基本频域测量是实时 RF 数字荧光显示(DPX)频谱显示测量、频谱显示测量和频谱图显示测量功能。 DPX 频谱 DPX 频谱测量对 RSA 发现其它分析仪漏掉的难检信号的能力至关重要。在所有泰克 RSA 中&am…

《面向对象程序设计》实践任务书

《面向对象程序设计》实践任务书 一、基本要求 &#xff08;1&#xff09;要求利用面向对象的方法以及c编程语言来完成系统的设计&#xff1b; &#xff08;2&#xff09;要求在设计的过程中&#xff0c;建立清晰的类层次&#xff1b; &#xff08;3&#xff09;自行设计文件保…

electron-vue 运行报错 Object.fromEntries is not a function

文章目录 1. 背景2. 解决方案2.1 第一步&#xff1a;安装依赖2.2 第二步&#xff1a;项目中引入 3. 组件详解 1. 背景 最近研究一款桌面端应用的开发框架electron-vue&#xff0c;在按照 electron-vue官方文档 操作之后操作如下&#xff0c;Object.fromEntries is not a funct…

C语言编程 7-12 日期格式化

世界上不同国家有不同的写日期的习惯。比如美国人习惯写成“月-日-年”&#xff0c;而中国人习惯写成“年-月-日”。下面请你写个程序&#xff0c;自动把读入的美国格式的日期改写成中国习惯的日期。 输入格式&#xff1a; 输入在一行中按照“mm-dd-yyyy”的格式给出月、日、年…

从0到整写一个Mini-Spring/Web框架实现基础的功能

文章持续更新中… 1. 针对于Spring/Web的执行流程 配置阶段 1.1 配置Web.xml —> 我们自己写的DispatcherServlet 1.2 设定init-param —> contextConfigLocation classpath:application.properties 1.3 设定url-pattern —> /* 1.4 配置Annotation —> XXCOntro…

汽车和地铁的无人驾驶了解

01汽车无人驾驶技术 汽车相对地铁列车&#xff0c;控制设备的安装空间较为有限&#xff0c;不同车辆的个体差异较大&#xff0c;其无人驾驶技术的实现方案需要更简约&#xff0c;主流的方案通常是通过多种车载传感器&#xff08;如摄像头、激光雷达、毫米波雷达、北斗/GPS、惯性…

基于springboot注解的shiro 授权及角色认证

目录 授权 后端接口服务注解 授权验证-没有角色无法访问 授权验证-获取角色进行验证 授权验证-获取权限进行验证 授权验证-异常处理 授权 用户登录后&#xff0c;需要验证是否具有指定角色指定权限。Shiro也提供了方便的工具进行判 断。 这个工具就是Realm的doGetAuthor…

C++ 异步编程

1. 异步编程含义及作用 相对于同步编程方式时&#xff0c;由于每个线程同时只能发起一个请求并同步等待返回&#xff0c;所以为了提高系统性能&#xff0c;此时我们就需要引入更多的线程来实现并行化处理。但是 多线程下对共享资源进行访问时&#xff0c;不可避免会引入资源争用…