Vue学习笔记8--插槽<slot></slot>

一、作用

让父组件可以向子组件指定的位置插入html结构,,也是一种组件间通信的方式,适用于父组件===》子组件。

二、分类:

  • 默认插槽
  • 具名插槽
  • 作用域插槽

三、使用方法

1. 默认插槽

父组件中:

<Category><div>html结构1</div>
</Category>

子组件中:

<template><div><!-- 定义插槽 --><slot>插槽默认内容...</slot></div>
</template>
2. 具名插槽
父组件中
<Category><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template></Category>

子组件中

<template><div><!-- 定义插槽 --><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div>
</template>
3. 作用域插槽
  • 理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由APP组件决定)
  • 具体编码
    (1) 父组件中:
<Category><template scope="scopeData><!-- 生成的是ul列表 --><ul><li v-for= "g in scopeData.games" :key="g">{{g}}</li></ul></template>
</Category>

(2) 子组件中:

<template><div><slot:games="games"></slot></div>
</template><script>export default {name:'Category',props:['title'],data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽'],}},}
</script>

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

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

相关文章

uni-app qiun-data-charts无法显示tooltip

如下代码无法使得图表展示tooltip <template><view style"overflow: hidden; background-color: #fff;box-sizing: border-box; border-radius: 5px; box-shadow: 4px 2px 6px #ccc;padding: 10px; position:relative;"><view style"font-weigh…

Ubuntu20.4 Mono C# gtk 编程习练笔记(二)

界面设计习练后&#xff0c;下面写一些程序设计心得。 程序结构 先看一下程序总体结构&#xff0c;先在program.cs中找到main入口&#xff0c;在命名空间下是MainClass类&#xff0c;Main函数进入后首先建立应用程序环境 Application.Init&#xff0c;然后对MainWindow进行实…

【嘉立创EDA-PCB设计指南】3.网络表概念解读+板框绘制

前言&#xff1a;本文对网络表概念解读板框绘制&#xff08;确定PCB板子轮廓&#xff09; 网络表概念解读 在本专栏的上一篇文章【嘉立创EDA-PCB设计指南】2&#xff0c;将设计的原理图转为了PCB&#xff0c;在PCB界面下出现了所有的封装&#xff0c;以及所有的飞线属性&…

What is `StringEscapeUtils.escapeHtml4` does?

StringEscapeUtils.escapeHtml4 作用是将特殊字符转换为它们对应的HTML实体形式&#xff0c;从而防止这些字符在网页中被解析为HTML标签或脚本&#xff0c;有助于防止跨站脚本攻击&#xff08;XSS, Cross-Site Scripting&#xff09; 依赖 <!--org.apache.commons.text.St…

【开源】基于JAVA语言的智慧家政系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询家政服务4.2 新增单条服务订单4.3 新增留言反馈4.4 小程序登录4.5 小程序数据展示 五、免责说明 一、摘要 1.1 项目介绍 基于微信小程序JAVAVueSpringBootMySQL的智慧家政系统&#xff0…

【Docker】安装 Nginx 容器并部署前后端分离项目

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Docker实战》。&#x1f3af;&#x1f3af; &…

GRU门控循环单元神经网络的MATLAB实现(含源代码)

在深度学习领域&#xff0c;循环神经网络&#xff08;RNN&#xff09;因其在处理序列数据方面的卓越能力而受到广泛关注。GRU&#xff08;门控循环单元&#xff09;作为RNN的一种变体&#xff0c;以其在捕捉时间序列长距离依赖关系方面的高效性而备受推崇。在本文中&#xff0c…

SpringBoot 中使用 Quartz 创建定时任务

文章目录 一、使用示例二、运行原理 一、使用示例 自定义 job&#xff1a; Slf4j public class MyJob extends QuartzJobBean {Overrideprotected void executeInternal(JobExecutionContext context) throws JobExecutionException {log.info("MyJob start...");l…

JavaWeb后端——Maven

maven主要服务于基于Java平台的项目构建、依赖管理和项目信息管理 maven项目对象模型简称POM&#xff0c; maven解决问题&#xff1a; 1. 添加第三方jar包&#xff0c;maven将 jar 包放在本地仓库中统一管理&#xff0c;使用时用坐标的方式引用即可 2. 解决 jar 包之间的依…

Facebook与环境保护:社交媒体的可持续发展

在当今社会&#xff0c;科技发展日新月异&#xff0c;而社交媒体作为数字时代的代表之一&#xff0c;正面临着巨大的责任与机遇。随着全球环境问题的凸显&#xff0c;社交媒体平台如Facebook也逐渐认识到自身在环保可持续发展中的角色。本文将深入探讨Facebook在环境保护方面的…

统计学-R语言-5.3

文章目录 前言分位数统计量的标准误总结 前言 本篇文章即为概率与分布的最后一篇文章。 分位数 分位数函数是累积分布函数的反函数。 p-分位数是具有这样性质的一个值&#xff1a;小于或等于它的概率为p。 根据定义&#xff0c;中位数即50%分位数。 分位数通常用于置信区间的…

vite 打包优化

✨专栏介绍 在当今数字化时代&#xff0c;Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序&#xff0c;就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术&#xff0c;以及各种框架、库和工具…

【机器学习实例讲解】机器学习-鸢尾花数据集多分类第02课

问题定义与理解&#xff1a; 明确机器学习任务的目标&#xff0c;是分类、回归、聚类、强化学习还是其他类型的问题。 确定业务背景和需求&#xff0c;了解所处理数据的现实意义。 数据收集&#xff1a; 根据任务目标从各种来源获取原始数据&#xff0c;可以是数据库、文件、…

SQL 查询两个时间段是否有交集的情况 三种写法

mysql 写法 其他一样 数据库的字段 start_time, end_time 输入的字段 a,b 第一种 SELECT * FROM test_table WHERE(start_time > a AND start_time < b)OR (start_time < a AND end_time > b)OR (end_time > a AND end_time < b) 第二种 SELECT * FROM …

Spring5深入浅出篇:Spring与工厂设计模式简介

Spring5深入浅出篇:Spring与工厂设计模式简介 什么是Spring Spring是⼀个轻量级的JavaEE解决⽅案&#xff0c;整合众多优秀的设计模式轻量级 1. 对于运⾏环境是没有额外要求的开源 tomcat resion jetty收费 weblogic websphere 2. 代码移植性⾼不需要实现额外接⼝JavaEE的解…

Bing AI:探索人工智能搜索引擎Bing Chat工具

Microsoft 更新了其搜索引擎 Bing&#xff0c;采用了由 OpenAI 的 GPT-4 模型提供支持的人工智能 &#xff08;AI&#xff09; 技术。 这意味着您现在可以与 Bing 聊天。而且&#xff0c;除了常规的链接列表外&#xff0c;搜索引擎还可以汇总互联网上的数据来回答您的问题。 …

架构篇04-复杂度来源:高性能

文章目录 单机复杂度集群的复杂度小结 从本篇开始&#xff0c;我们一起深入分析架构设计复杂度的 6 个来源&#xff0c;先来聊聊复杂度的来源之一高性能。 对性能孜孜不倦的追求是整个人类技术不断发展的根本驱动力。例如计算机&#xff0c;从电子管计算机到晶体管计算机再到集…

VL171 VL170配合LDR6020的type-c母座显示器方案

兼容基于VASEL控制引脚的10 Gbps USB3.2 Gen2和AM所有4通道视频&#xff0c;包括DP1.4 8.1 Gbps VL171配合LDR6020实现的type-c桌面显示器方案电路LDR6020是一个DRP的PD芯片&#xff0c;PD芯片与主机通讯完之后&#xff0c;通过PD芯片去控制VL171实现正反插与USB信号和DP信号的…

31 3D日历组件

效果演示 实现了一个3D文字旋转的效果&#xff0c;当鼠标悬停在容器上时&#xff0c;最后一个文字会旋转630度&#xff0c;而其他文字会逐渐旋转到水平面上方。 Code <div class"container"><div class"text" style"--j:0;"><sp…

python中json的用法(详细)

json.dumps(数据) 用法是将数据类型&#xff08;字符串&#xff0c;列表&#xff0c;字典&#xff0c;元组&#xff09;加载成字符串。ensure_asciiFalse参数可以加载中文。元组会转成列表形式的字符串 json.loads(数据) 用法是将字符串加载成数据类型&#xff08;字符串&am…