【Vue3】插槽的使用及其分类

历史小剧场

后来我才明白,造反的宋江,和招安的宋江,始终是同一个人。
为什么要造反?
造反,就是为了招安。 ----《明朝那些事儿》

概念

在日常的项目开发中,当我们在编写一个完整的组件时,不可避免的会引用一些外部组件或者自定义组件。而有些内容是在父组件中一样的,而在子组件中会对一些数据单独的处理。为了解决类似这样的问题,Vue设计出来了slot这个东西,也可以称为Vue的内容分发机制,它的主要作用就是向子组件的指定位置插入一断内容,这个内容可以是HTML或者其他组件。

默认插槽

这里有两个组件

Father

<!--  -->
<template><div class="category"><Category title="今日美食推荐"><ul><li v-for="item in foods" :key="item.id">{{ item.name }}</li></ul></Category><Category title="今日美景大赛"><img :src="imageUrl" alt=""></Category><Category title="今日电影直播"><video :src="videoUrl" controls /></Category></div>
</template><script setup lang="ts" name="Father">
import { reactive, ref } from 'vue';
import Category from './Category.vue'
const foods = reactive([{id: 1,name: '鱼香肉丝'},{id: 2,name: '麻婆豆腐'},{id: 3,name: '大肉饼'}
])const imageUrl = ref('https://images.wallpaperscraft.com/image/single/japanese_apricot_flowers_buds_1252465_1280x720.jpg')
const videoUrl = ref('https://cdn.pixabay.com/video/2021/04/12/70796-538877060_large.mp4')
</script><style lang="scss" scoped>
.category {display: flex;// 均分开justify-content: space-evenly; 
}
img, video {width: 100%;
}
</style>

Child:

<!--  -->
<template><div class="content"><h2>{{ title }}</h2><slot>默认内容</slot></div>
</template><script setup lang="ts" name="Category">
defineProps(['title'])
</script><style lang="scss" scoped>
.content {background-color: skyblue;width: 200px;height: 300px;border-radius: 10px;padding: 10px;
}
h2 {text-align: center;background-color: green;color: white;font-weight: 800;
}
</style>

具名插槽

具名插槽就是给我们的插槽起一个名字,即给插槽定义一个name属性

Child:

<!--  -->
<template><div class="content"><slot name="s1">内容1</slot><slot name="s2">内容2</slot></div>
</template><script setup lang="ts" name="Category">
</script><style lang="scss" scoped>
.content {background-color: skyblue;width: 200px;height: 300px;border-radius: 10px;padding: 10px;
}</style>

Father:

<!--  -->
<template><div class="category"><Category title=""><template v-slot:s2><ul><li v-for="item in foods" :key="item.id">{{ item.name }}</li></ul></template><template v-slot:s1><h2>今日美食推荐</h2></template></Category><Category><template v-slot:s2><img :src="imageUrl" alt="" /></template><template v-slot:s1><h2>今日美景大赛</h2></template></Category><Category><template #s2><video :src="videoUrl" controls></video></template><template #s1><h2>今日电影直播</h2></template></Category></div>
</template><script setup lang="ts" name="Father">
import { reactive, ref } from 'vue';
import Category from './Category.vue'
const foods = reactive([{id: 1,name: '鱼香肉丝'},{id: 2,name: '麻婆豆腐'},{id: 3,name: '大肉饼'}
])const imageUrl = ref('https://images.wallpaperscraft.com/image/single/japanese_apricot_flowers_buds_1252465_1280x720.jpg')
const videoUrl = ref('https://cdn.pixabay.com/video/2021/04/12/70796-538877060_large.mp4')
</script><style lang="scss" scoped>
.category {display: flex;// 均分开justify-content: space-evenly; 
}
h2 {text-align: center;background-color: green;color: white;font-weight: 800;
}
img, video {width: 100%;
}
</style>

作用域插槽

作用域插槽:数据在子组件那边,但根据数据生成的结构,却由父组件决定

父组件使用:变量 传递数据

<!--  -->
<template><div class="content"><slot name="s1">内容1</slot><slot name="s2" :foods="foods">内容2</slot></div>
</template><script setup lang="ts" name="Category">
import { reactive } from 'vue';const foods = reactive([{id: 1,name: '鱼香肉丝'},{id: 2,name: '麻婆豆腐'},{id: 3,name: '大肉饼'}
])
</script><style lang="scss" scoped>
.content {background-color: skyblue;width: 200px;height: 300px;border-radius: 10px;padding: 10px;
}</style>

父组件可以使用params读取到子组件传递过来的数据

<!--  -->
<template><div class="category"><Category title=""><template v-slot:s2="params"><ul><li v-for="item in params.foods" :key="item.id">{{ item.name }}</li></ul></template><template v-slot:s1><h2>今日美食推荐</h2></template></Category><Category><!-- 解构出来 --><template v-slot:s2="{foods}"><ol><li v-for="item in foods" :key="item.id">{{ item.name }}</li></ol></template><template v-slot:s1><h2>今日美景大赛</h2></template></Category><Category><!-- 解构出来 --><template #s2="{foods}"><h4 v-for="item in foods" :key="item.id">{{ item.name }}</h4></template><template #s1><h2>今日电影直播</h2></template></Category></div>
</template><script setup lang="ts" name="Father">
import Category from './Category.vue'</script><style lang="scss" scoped>
.category {display: flex;// 均分开justify-content: space-evenly; 
}
h2 {text-align: center;background-color: green;color: white;font-weight: 800;
}
img, video {width: 100%;
}
</style>

在这里插入图片描述

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

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

相关文章

【动态规划】0-1背包问题

【动态规划】0-1背包问题 题目:现在有四个物品&#xff0c;背包总容量为8&#xff0c;背包最多能装入价值为多少的物品? 我的图解 表格a【i】【j】表示的是容量为j的背包装入前i个物品的最大价值。 拿a【1】【1】来说&#xff0c;它的值就是背包容量为1&#xff0c;只考虑…

我的创作纪念日256days

机缘 当我回望走过的路&#xff0c;心中有无数的故事在跳跃&#xff0c;试图穿过指尖&#xff0c;流淌在文字之间。成为一名创作者&#xff0c;对我来说并非一蹴而就的决定&#xff0c;而是一场始于内心深处的召唤。那是一种对表达的渴望&#xff0c;对美的追求&#xff0c;最重…

【探索Linux命令行】从基础指令到高级管道操作的介绍与实践

目录 man 指令&#xff08;说明&#xff09; 介绍 cp 指令&#xff08;复制&#xff09; ​编辑 mv 指令&#xff08;移动&#xff09; ​编辑 cat 指令&#xff08;类似cout&#xff09; less&#xff08;查找&#xff09; head & tail&#xff08;打印&#xff…

[数据集][目标检测]减速区域检测数据集VOC+YOLO格式1654张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1654 标注数量(xml文件个数)&#xff1a;1654 标注数量(txt文件个数)&#xff1a;1654 标注…

cap原理是什么?

CAP原理&#xff0c;也被称为CAP定理或Brewer定理&#xff0c;描述了在分布式系统中&#xff0c;一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和分区容错性&#xff08;Partition tolerance&#xff09;这三个特性只能同时满足其中…

鸿蒙轻内核A核源码分析系列六 MMU协处理器(2)

3、MMU汇编代码 在arch\arm\arm\include\arm.h文件中&#xff0c;封装了CP15协处理器相关的寄存器操作汇编函数。我们主要看下MMU相关的部分。 3.1 CP15 C2 TTBR转换表基地址寄存器 代码比较简单&#xff0c;结合下图&#xff0c;自行查看即可。该图来自《ARM Cortex-A9 Tec…

Java学习 - MySQL数据存储过程 + 函数 + 触发器介绍实例

存储过程 存储过程的概念和优点 概念&#xff1a;存储过程是一组预先编译好的SQL语句的集合类比&#xff1a;存储过程类似于 Go 中的函数优点&#xff1a;提高代码重用性&#xff0c;简化操作&#xff0c;减少编译次数 创建存储过程 创建语法 DELIMITER $ # 不能加分号CREA…

JavaFX HBox

JavaFX API具有将UI控件显示到场景图上的布局类。HBox布局类将JavaFX子节点放在水平行中。 新的子节点附加到右侧的末尾。默认情况下&#xff0c;HBox布局尊重子节点的首选宽度和高度。 当父节点不可调整大小时&#xff0c;例如Group节点&#xff0c;HBox的行高度设置为子节点的…

【车载开发系列】专业术语汇总(CAN网络管理关联)

【车载开发系列】专业术语汇总&#xff08;CAN网络管理关联&#xff09; 【车载开发系列】专业术语汇总 【车载开发系列】专业术语汇总&#xff08;CAN网络管理关联&#xff09; 英文缩写英文全称中文说明ACKAcknowledge应答-SNISource Node Identifier源节点标识符-CBVControl…

RSS Channel 元素

RSS Channel 元素 概述 RSS(Really Simple Syndication)是一种广泛使用的消息来源格式,允许用户订阅并接收他们感兴趣的内容更新。RSS文档通常包含一个或多个<channel>元素,每个元素代表一个特定的内容源。本文将详细探讨<channel>元素的结构和用途,以及如何…

【工作】计算机行业相关的十六类工作简介

本文简单介绍了计算机行业相关的工作类别&#xff0c;共16种&#xff0c;包括常见招聘要求与平均工资。平均工资信息来源&#xff1a;米国企业点评职场社区glassdoor&#xff08;https://www.glassdoor.com/index.htm&#xff09; &#xff08;一&#xff09;软件工程师 软件…

003、浅谈Neo4j的数据模型

Neo4j 数据模型概述 Neo4j 是一种图数据库&#xff0c;采用图数据模型来存储和管理数据。这个模型由节点&#xff08;nodes&#xff09;、关系&#xff08;relationships&#xff09;和属性&#xff08;properties&#xff09;组成&#xff0c;特别适合表示复杂的连接关系和网…

图书馆图书可视化分析+大屏

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 目录 摘要前言技术栈开发环境数据说明 正文数据获取数据存储数据清理数据分析数据挖掘关联规则二分类预测 数据可视化书籍价格区间柱状图书籍评…

质疑标普,理解标普,加入标普

上周我在文章里提到过&#xff0c;标普信息科技LOF(161128)出现套利机会。每天申购卖出&#xff0c;到现在一个账户56*6336润。 得益于美股七巨头轮流领涨&#xff0c;161128依旧坚挺&#xff0c;每天溢价都是10%&#xff0c;成交量1个多亿&#xff0c;场内新增份额才400万份&…

c中编程题最有效率的方法算出2乘以8等於几

在C语言中&#xff0c;计算2乘以8的方法也是直接进行乘法操作。C语言提供了乘法运算符*&#xff0c;你可以直接使用它来计算两个数的乘积。 下面是一个简单的C语言程序&#xff0c;展示了如何计算2乘以8&#xff1a; c #include <stdio.h> int main() { int result …

Vue中双向数据绑定是如何实现的

Vue.js 的双向数据绑定是通过其响应式系统实现的。当 Vue 实例创建时&#xff0c;它会遍历 data 对象中的所有属性&#xff0c;并使用 Object.defineProperty 将它们转化为 getter/setter&#xff0c;使得 Vue 能够追踪每个属性的变化&#xff0c;并在变化时通知相关的依赖进行…

python学习:语法(2)

目录 对象的布尔值 分支结构 双分支结构 多分支结构 嵌套if的使用 条件表达式 Pass语句 range()函数的使用 流程控制语句 对象的布尔值 Python一切皆对象&#xff0c;所有对象都有一个布尔值&#xff0c;通过内置函数bool&#xff08;&#xff09;获取对象的布尔值 这些…

路由器虚拟服务器有什么作用

现如今在IPv4时代&#xff0c;由于公网IP地址的匮乏&#xff0c;约有70%的电脑都处于内网中&#xff0c;上网需要通过路由器。如果反过来想要访问身处内网的电脑&#xff0c;我们就需要在路由器里开放相应的端口才能实现。而这开放端口的功能&#xff0c;在路由器里就叫做虚拟服…

NASA数据:南极海洋生物资源

Antarctic Marine Living Resources (AMLR) program 南极海洋生物资源许可证 南极海洋生物资源保护委员会公约区受到管制。任何打算从该区域捕获海洋生物的人都必须获得许可证。 简介 美国是南极海洋生物资源保护委员会&#xff08;Commission for the Conservation of Anta…

JVM面试重点-2

16. 吞吐量优先和响应时间优先的回收器是哪些&#xff1f; 吞吐量优先&#xff1a;Parallel Scavenge Parallel Old&#xff08;多线程并行&#xff09;->简称&#xff1a; PSPO -> JDK1.8默认响应时间优先&#xff1a;ParNew CMS&#xff08;并发回收垃圾&#xff09…