Vue10 组件通信-插槽

插槽

分成三种:默认插槽、具名插槽、作用域插槽

默认插槽

父组件father.vue

<template><div class="father"><h3>父组件</h3><div class="content"><Category title="热门游戏列表"><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></Category><Category title="今日美食城市"><img :src="imgUrl" alt=""></Category><Category title="今日影视推荐"><video :src="videoUrl" controls></video></Category></div></div>
</template><script setup lang="ts" name="Father">import Category from './Category.vue'import { ref,reactive } from "vue";let games = reactive([{id:'asgytdfats01',name:'英雄联盟'},{id:'asgytdfats02',name:'王者农药'},{id:'asgytdfats03',name:'红色警戒'},{id:'asgytdfats04',name:'斗罗大陆'}])let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.content {display: flex;/* flex将所有竖向变成横向  均分开 */justify-content: space-evenly;}img,video {width: 100%;}
</style>

Categroy.vue

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

具名插槽

每一个坑内容 必须放在对应的里面 v-slot:name

父组件father.vue

<template><div class="father"><h3>父组件</h3><div class="content"><Category><template v-slot:s2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></template><template v-slot:s1><h2>热门游戏列表</h2></template></Category><Category><template v-slot:s2><img :src="imgUrl" 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></div>
</template><script setup lang="ts" name="Father">import Category from './Category.vue'import { ref,reactive } from "vue";let games = reactive([{id:'asgytdfats01',name:'英雄联盟'},{id:'asgytdfats02',name:'王者农药'},{id:'asgytdfats03',name:'红色警戒'},{id:'asgytdfats04',name:'斗罗大陆'}])let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.content {display: flex;/* flex将所有竖向变成横向  均分开 */justify-content: space-evenly;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}img,video {width: 100%;}
</style>

子组件 Category.vue

<template><div class="category"><slot name="s1">默认内容1</slot><slot name="s2">默认内容2</slot></div>
</template><script setup lang="ts" name="Category">defineProps(['title'])
</script><style scoped>.category {background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;}
</style>

作用域插槽

  1. 数据在子那边,但根据数据生成的结构,由父亲决定

案例

父组件 father.vue

根据需要调整传递的games格式

v-slot 可以直接结构数据 下面可以直接写 g in games

<template><div class="father"><h3>父组件</h3><div class="content"><Game><template v-slot="params"><ul><li v-for="g in params.games" :key="g.id">{{ g.name }}</li></ul></template></Game><Game><template v-slot="{games}"><ol><li v-for="g in games" :key="g.id">{{ g.name }}</li></ol></template></Game><Game><template v-slot="{games}"><h3 v-for="g in games" :key="g.id">{{ g.name }}</h3></template></Game></div></div>
</template><script setup lang="ts" name="Father">import Game from './Game.vue'
</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.content {display: flex;/* flex将所有竖向变成横向  均分开 */justify-content: space-evenly;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}img,video {width: 100%;}
</style>

子组件 game.vue

games在子组件中,父组件无法拿到,所以先需要给插槽传递 games

<template><div class="game"><h2>游戏列表</h2><!-- <ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul> --><!-- 给插槽里面传递 --><slot :games="games" x="哈哈" y="你好"></slot></div>
</template><script setup lang="ts" name="Game">import { reactive } from 'vue';let games = reactive([{id:'asgytdfats01',name:'英雄联盟'},{id:'asgytdfats02',name:'王者农药'},{id:'asgytdfats03',name:'红色警戒'},{id:'asgytdfats04',name:'斗罗大陆'}])
</script><style scoped>.game{width: 200px;height: 300px;background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}
</style>

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

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

相关文章

OSPF综合实验(超详细易懂)(HCIP)

1、拓扑信息 2、需求分析 3、IP规划 4、配置 5、测试 1、拓扑信息 2、需求分析 R4为ISP&#xff0c;其上只能配置I地址&#xff1b; R4与其他所有直连设备间均使用公…

【Linux系列】tail查询使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

在数字化时代保持企业财务管理的持续技术创新

根据全球市场调查&#xff0c;在现阶段企业如果还不更新自身的商业运作模式&#xff0c;企业的业务可能会一点一点丧失市场竞争力。技术进步是所有行业发展的明显趋势。许多年轻的初创企业具有创新管理思维、精益求精的决策流程和现代化的商业基础设施&#xff0c;这些顺应时代…

转行网络安全的重要建议,助你顺利入门

目录 为什么写这篇文章 为什么我更合适回答这个问题 先问自己3个问题 1.一定要明确自己是否是真喜欢&#xff0c;还是一时好奇。 2.自学的习惯 3.选择网安、攻防这行的目标是什么&#xff1f; 确认无误后&#xff0c;那如何进入这个行业&#xff1f; 1.选择渗透测试集中…

重生奇迹mu烈火剑带什么技能

在重生奇迹mu游戏中&#xff0c;35级是每个职业的分水岭&#xff0c;只要到了35级&#xff0c;三职业都可以学习自己的高级技能&#xff0c;道士可以召唤自己的大狗&#xff0c;法师拥有冰咆哮&#xff0c;战士就是咱们今天要说的烈火剑法&#xff0c;这三种技能都需要玩家自己…

Python: 日期和时间格式化

from datetime import datetime# 获取当前时间 current_time datetime.now() print(f"current_time {current_time}")# yyyymmdd format_date current_time.strftime("%Y%m%d") print(f"format_date {format_date}")# yyyy-mm-dd format_dat…

【android 更改三方相机配流size】

前言 强制修改三方相机配流size, 拍照和预览都可以 声明&#xff1a; 本帖用的是安卓开源代码&#xff1a; http://aospxref.com/android-14.0.0_r2/xref/frameworks/av/services/camera/libcameraservice/api2/CameraDeviceClient.cpp#867 修改方案 867 binder::Status C…

Chromium 调试指南2024 Windows11篇-安装代码编辑器VSCode(三)

1. 前言 在进行Chromium项目的开发和调试之前&#xff0c;安装适合的代码编辑器是至关重要的一步。本文将介绍如何安装Visual Studio Code&#xff0c;这是一个功能强大且广受开发者欢迎的代码编辑器。通过正确安装Visual Studio Code&#xff0c;我们将为后续的Chromium代码编…

张驰咨询六西格玛黑带培训,上海开班,质量精英的摇篮!

一、课程背景与意义 在当今竞争激烈的市场环境中&#xff0c;企业要想立于不败之地&#xff0c;就必须不断提升自身的核心竞争力。而六西格玛作为一种先进的质量管理工具和方法&#xff0c;已经被越来越多的企业所采纳。通过六西格玛黑带培训&#xff0c;学员们可以系统地掌握…

Windows上安装Seata服务

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 Seata 是一款开源的…

什么是MTC证书?清关为什么要提交MTC?

一、MTC认证的定义 MTC认证是一种由供应商、制造商或第三方实验室提供的认证&#xff0c;用于证明材料的质量和符合特定标准或规格的要求。它包括详细的材料信息、化学成分、机械性能测试结果和符合性声明等内容&#xff0c;为确保材料质量提供了有力的证据和保障。 二、MTC证书…

IDEA创建SpringBoot项目仅支持JDK17及以上版本的解决方案

背景 IDEA创建SpringBoot项目仅支持JDK17及以上版本的解决方案 原因 由于SpringBoot3.x.x版本的到来&#xff0c;官方称将来17及以上版本将成为主流&#xff0c;但是大多数的项目仍然使用JDK8。 1.解决方案一 将https://start.spring.io/或者http://start.springboot.io/替…

Linux系列---【使用lvm对xfs类型逻辑卷进行缩容】

使用lvm对xfs类型逻辑卷进行缩容 1.确定需要缩容的逻辑卷的类型是否是xfs df -Th 2.备份逻辑卷对应的目录原数据 # /tmp/home.dump:为备份后存放的位置&#xff0c;/home&#xff1a;为需要备份的目录 xfsdump -f /tmp/home.dump /home # 1.输入session名:home_session # 2.输入…

MBR与GPT分区表

文章目录 MBR分区表MBR分区表结构MBR分区表项查看U盘的分区表信息查看系统中所有磁盘的分区类型获取分区表信息 GPT分区表保护性MBRGPT分区表头格式GPT分区表项格式分区类型分区属性分区表项内容 MBR分区表 CHS &#xff1a;磁头&#xff08;Heads&#xff09;、柱面(Cylinder…

羊大师:当代年轻人如何应对压力

羊大师&#xff1a;当代年轻人如何应对压力 当代年轻人面临各种压力&#xff0c;包括工作、学习、人际关系、经济等方面的压力。以下是一些建议&#xff0c;帮助年轻人应对这些压力&#xff1a; 认识并接受压力&#xff1a; 首先要认识到压力是生活中不可避免的一部分。 尝试…

Linux——进程的优先级、ACL

一、系统性能调优 Redhat7和centos7默认安装并启动了tuned服务 实验 [rootuser ~]# tuned-adm list //查看所有的调优方案 [rootuser ~]# tuned-adm recommend // 查看推荐的调优方案 virtual-guest 适用于作为虚拟机客户机运行的设备&#xff0…

盘点2024年4月Sui生态发展,了解Sui近期成长历程!

2024年4月是Sui的活动月&#xff0c;10–11日聚焦全世界目光的Sui Basecamp会议如约而至&#xff0c;来自65个国家的超过1100人参加了这场在巴黎举办的Sui全球性活动。21日&#xff0c;Sui首届全球黑客松正式开放注册。同时&#xff0c;20日-28日&#xff0c;七天四场大陆地区重…

【数据结构】单链表专题详细分析

与其临渊羡鱼&#xff0c;不如退而结网。&#x1f493;&#x1f493;&#x1f493; 目录 •✨说在前面 &#x1f34b;知识点一&#xff1a;什么是链表&#xff1f; • &#x1f330;1.链表的概念 • &#x1f330;2.链表的结构 • &#x1f330;3.链表的分类 &#x1f34b;…

C++包装内置容器项目实战

问题1&#xff1a;template<class _Ty,class _Container set<_Ty> >用法 这里给出了一个模板类模板参数的定义&#xff0c;其中有两个模板参数&#xff1a;_Ty 和 _Container。这个模板类可以用来创建一个容器&#xff0c;其中存储的元素类型是 _Ty&#xff0c;容…

9.为什么有时候会“烫烫烫”——之函数栈桢

目录 1. 什么是函数栈帧 2. 理解函数栈帧能解决什么问题呢&#xff1f; 3. 函数栈帧的创建和销毁解析 3.1 什么是栈&#xff1f; 3.2 认识相关寄存器和汇编指令 3.3 解析函数栈帧的创建和销毁 小知识&#xff1a;烫烫烫~ Q&A 1. 什么是函数栈帧 我们在写C语言代码…