Vue(十一)默认插槽、具名插槽、作用域插槽

文章目录

  • 一、需求
  • 二、插槽
    • 1. 默认插槽
    • 2. 具名插槽
    • 3. 作用域插槽

一、需求

有三个Category组件,展示不同的内容。
需求:美食模块需要展示图片,游戏模块还是文字,电影模块展示预告片。
在这里插入图片描述

<!--App组件-->
<template><div class="container"><Category :listData="foods" title="美食"> </Category><Category :listData="games" title="游戏"> </Category><Category :listData="films" title="电影"> </Category></div>
</template>
<script>data () {return {foods: ['火锅', '烧烤', '小龙虾'],games: ['超级玛丽', '魂斗罗'],films: ['寻梦环游记', '小黄人大眼萌']}}
</script>
<!--Category组件-->
<template><div class="content"><h3 class="title">{{ title }}</h3><ul><li v-for="(item, index) in listData" :key="index">{{ item }}</li></ul></div>
</template>
<script>props: ['listData', 'title']
</script>

二、插槽

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

1. 默认插槽

<!--父组件中:--><Category><div>html结构1</div></Category>
<!--子组件中:--><template><div><!-- 定义插槽,相当于在这里挖了个坑,等待组件的使用者来填充 --><slot>插槽默认内容...</slot></div></template>

在这里插入图片描述
插槽里的这些样式放在App里也行,放在Category里也行。


在这里插入图片描述

2. 具名插槽

当子组件中包含多个插槽时,需要给每个插槽起名字
起名字:指定name属性
使用具名插槽:

  • slot = '插槽名'
  • 如果使用了template, 还可以v-slot:footer来指定使用哪个插槽(这种方式只有template可以这样写)

子组件:

<!--Category组件-->
<template><div class="content"><h3 class="title">{{ title }}</h3><slot name="center"></slot><slot name="footer"></slot></div>
</template>

父组件:

<!--App.vue组件--><div class="container"><Category title="美食"><img slot="center" src="../public/food.jpg" alt="" /><div slot="footer" class="foot"><a href="">更多美食</a><a href="">更多美食</a></div></Category><Category title="游戏"><ul slot="center"><li v-for="(g, index) in games" :key="index">{{ g }}</li></ul><a href="#" slot="footer">单机游戏</a></Category><Category title="电影"><video src="https://vjs.zencdn.net/v/oceans.mp4"></video><template v-slot:footer><div class="foot"><a href="http://www.atguigu.com">经典</a><a href="http://www.atguigu.com">热门</a><a href="http://www.atguigu.com">推荐</a></div></template></Category></div>

在这里插入图片描述
如果插槽不指定名称,使用的时候就会出现多个同样的内容
在这里插入图片描述

在这里插入图片描述

3. 作用域插槽

子组件通过插槽给父组件传值,必须要写template来接收传过来的值。

理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)

子组件Category

<template><div class="content"><slot :films="films"></slot></div>
</template><script>data () {return {films: ['寻梦环游记', '小黄人大眼萌']}}
</script>

父组件App.vue

  <div class="container"><Category><!-- template必须要写 --><template scope="scopeData"><!--查看scopeData具体是什么-->{{scopeData}}<ul><li v-for="(item, index) in scopeData.films" :key="index"> {{ item }}</li></ul></template></Category></div>

1、 scopeData具体内容是什么?
是一个对象
在这里插入图片描述
2、获取scope数据的简单方式,解构赋值

 <template scope="{films}"><ul><li v-for="(item, index) in films" :key="index"> {{ item }}</li></ul></template>

3、获取数据还有一种方式

语法:slot-scope="{films}

 <template slot-scope="{films}">...</template>

用哪种方式都行,是新旧api的原因。slot-scope是新api获取数据的方式,scope是旧api获取数据的方式

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

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

相关文章

一.海量数据实时分析-Doris入门和安装

前言 停了一个月又开始写文章啦&#xff0c;因为公司数据量达到了几十亿&#xff0c;老板需要做实时数据分析&#xff0c;报表看板。这么大的数据量比较好的选择是使用Doris来做&#xff0c;他可以脱离hadoop生态独立使用所以大受企业喜爱&#xff0c;也因为如此就有了这个系列…

springboot学习11 (菜品缓存redis)

缓存逻辑分析 目的&#xff1a;减轻数据库压力每个分类下的菜品保存一份缓存数据数据库中菜品数据有变更时清理缓存数据 keyvaluedish_1string(...)dish_2string(...)dish_3string(...) GetMapping("/list")ApiOperation("根据分类id查询菜品")public Res…

敏捷需求管理,推动敏捷项目成功——Leangoo领歌敏捷工具

在敏捷项目管理中&#xff0c;需求管理是决定项目成功的关键环节。准确捕捉和高效管理需求&#xff0c;不仅能避免项目偏航&#xff0c;还能确保最终交付的产品与客户预期高度契合。Leangoo领歌敏捷工具&#xff0c;正是为此而生&#xff0c;助力团队轻松实现需求管理的每一步。…

分贝通助力元气森林企业支出一体化降本提效

凭借着“0糖0脂0卡”这句广告语,元气森林几乎是一锤砸中了年轻消费者的内心,让“好喝不胖”深入人心,成为了国内饮品消费的新风向标。如果我们从近两年的快消饮品中选出几款深受消费者喜爱的“国货品牌”的话,相信「元气森林」一定上榜。 元气森林成立于2016年,旗下拥有元气森林…

C语言典型例题59

《C程序设计教程&#xff08;第四版&#xff09;——谭浩强》 题目&#xff1a; 例题4.11 译密码。为使电文保密&#xff0c;往往按一定规律将其转换为密码&#xff0c;收报人再按约定的规律将其译回原文。 例如&#xff0c;可以按以下规律将电文变为密码&#xff1a; 将字母A…

Harbor部署docker私人仓库

1、新建虚拟机rhel9 2、配置网络 #修改内核参数使网卡名称为ethxxx grubby --update-kernel ALL --args net.ifnames0reboot #配置网络 vim /etc/NetworkManager/system-connections/eth0.connection 内容为&#xff1a;[connection] ideth0 typeethernet interface-nameeth0…

储能电站变流器设计与仿真研究(文章复现matlab)

为了有效解决交流子网与直流子网间的功率传输&#xff0c; 降低电流谐波&#xff0c; 基于三相电压源型变流器及变流器的控制方法&#xff0c; 在 MATLAB R2018a 环境下搭建了储能变流器的整体仿真模型。 电路主要由三相电网、 三相 PWM 变流器、Buck/Boost 变换器和蓄电池构成…

使用Dify搭建企业知识库聊天机器人

本文简介 在当今数字化时代&#xff0c;企业知识库的建设和维护对于提升工作效率和服务质量至关重要。AI聊天机器人作为知识库的交互界面&#xff0c;可以提供24/7的即时服务。 本文将介绍如何使用 Dify 这一工具快速搭建企业知识库聊天机器人&#xff0c;它可以当你企业的职…

sqli-libs第四关详解

首先判断是数字型注入还是字符型注入 正常显示&#xff0c;说明是字符型注入&#xff0c;那么尝试单引号闭合 还是正常显示&#xff0c;尝试双引号闭合 有报错信息&#xff0c;含有括号&#xff0c;这时就应该想到&#xff0c;sql代码是("$id")这样写的了。直接采取闭…

HTML5有格调的个人介绍网站源码

文章目录 1.设计来源1.1 主界面1.2 个人信息界面1.3 项目统计界面1.4 我的相册界面1.5 朋友评价界面1.6 保持联系界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&a…

第L2周:机器学习-线性回归

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标&#xff1a; 学习简单线性回归模型和多元线性回归模型通过代码实现&#xff1a;通过鸢尾花花瓣长度预测花瓣宽度 具体实现&#xff1a; &#xff08;一&…

【JS】事件捕获和事件冒泡的区别

事件捕获和事件冒泡是指在 DOM 树中处理事件时的两种不同的传播方式。它们之间的主要区别在于事件传播的方向和顺序&#xff1a; 事件捕获&#xff08;Capture&#xff09; 方向&#xff1a; 从最外层的祖先元素向目标元素传播。顺序&#xff1a; 事件首先从最外层的祖先元素…

随机化 bbr probebw cycle phase

常打磨常新&#xff0c;bbr 和 inflight 守恒算法的模型和仿真也在不断优化。 再次给出 bbr 模型&#xff0c;这次修改了 d x d t \dfrac{dx}{dt} dtdx​ 的表达式&#xff0c;由 g 2 ⋅ x ⋅ r m i n g_2\cdot x\cdot r_{min} g2​⋅x⋅rmin​计算。同时加入了微观建模 pro…

5.注册中心的其他实现-Nacos

文章目录 1.Nacos简介2.Nacos的安装2.1Nacos Windows本地启动不成功&#xff1f;2.2Linux环境下载并启动 3. Nacos的使用4.Nacos的负载均衡5.Nacos 健康检查6.Nacos 环境隔离7.Nacos 配置中心7.1为什么需要配置中心7.2 Nacos配置中心使用7.3 Data id7.4Nacos 上Linux部署服务7.…

XSS LABS - Level 13 过关思路

关注这个靶场的其他相关笔记&#xff1a;XSS - LABS —— 靶场笔记合集-CSDN博客 0x01&#xff1a;过关流程 进入靶场&#xff0c;老样子&#xff0c;右击&#xff0c;查看页面源码&#xff0c;找找不同&#xff1a; 可以看到&#xff0c;本关又多了一个新字段 t_cook&#xf…

#C++ 笔记二

四、运算符重载 1.友元 1.1 概念 类实现了数据的隐藏和封装&#xff0c;类的数据成员一般定义为私有成员&#xff0c;仅能通过类的公有成员函数才能进行读写。 如果数据成员定义成公共的&#xff0c;则又破坏了封装性。但是在某些情况下&#xff0c;需要频繁的读写数据成员…

【Transformer】基本概述

文章目录 提出背景核心思想—注意力机制流程解析参考资料 提出背景 在Transformer模型出现之前&#xff0c;循环神经网络&#xff08;RNN&#xff09;及其变体&#xff0c;如长短期记忆网络&#xff08;LSTM&#xff09;和门控循环单元&#xff08;GRU&#xff09;&#xff0c;…

Ethercat设备数据 转IEC61850项目案例

目录 1 案例说明 1 2 VFBOX网关工作原理 1 3 准备工作 2 5 设置网关采集ETHERCAT数据 5 6 用IEC61850协议转发数据 7 7 网关使用多个逻辑设备和逻辑节点的方法 9 8 安装NPCAP 10 9 案例总结 11 1 案例说明 设置网关采集EtherCAT设备数据把采集的数据转成IEC61850协议转发给其…

Ollydbg提示:xxxxxx可能不是一个 32 位 PE 文件,无论如何都尝试载入吗?

原标题&#xff1a;OD提示C:\Users\XuanRan\Desktop\xxxx.exe’可能不是一个个 32 位 PE 文件,无论如何都尝试载入吗? 它的意思就是告诉你&#xff0c;OD现在只能用于32位软件。 如果要调试64位程序&#xff0c;去使用x64dbg x64dbg下载链接&#xff1a; https://github.com…

记一次ssh伪终端修改为shell

问题 用户ssh进行连接后&#xff0c;默认为伪终端。 解决办法&#xff0c;可以先拿到终端shell&#xff0c;查看用户是否为/bin/bash&#xff1a; 不是/bin/bash&#xff0c;使用如下命令进行修改&#xff1a; chsh -s /bin/bash rootservice sshd restart