第IV章-Ⅱ Vue3中的插槽使用

第IV章-Ⅱ Vue3中的插槽使用

  • 基本插槽
    • 默认内容
  • 具名插槽
  • 作用域插槽

在 Vue 3 中,插槽(slots)是一种强大的模式,用于将模板代码从父组件注入到子组件中,使得子组件的内容可以在使用时被自定义。Vue 3 中的插槽用法包括基本插槽、具名插槽和作用域插槽。

基本插槽

基本插槽允许父组件向子组件传递内容,这些内容在子组件的模板中通过一个简单的 标签进行定义和显示。

  • 子组件
<template><div><slot></slot> <!-- 默认插槽 --></div>
</template><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({name: 'ChildComponent'
});
</script>
  • 父组件
<template><div><ChildComponent><p>This content will go into the default slot of the ChildComponent.</p></ChildComponent></div>
</template><script lang="ts">
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';export default defineComponent({name: 'ParentComponent',components: {ChildComponent}
});
</script>

默认内容

可以在 标签内部指定默认内容,如果父组件没有提供任何插槽内容,将显示默认内容。

  • 子组件
<template><div><slot>Default content if nothing is provided by the parent.</slot></div>
</template>

具名插槽

具名插槽允许你为不同的插槽内容定义多个插槽,每个插槽都有其唯一的名字。这样父组件可以针对特定的插槽提供内容。

  • 子组件
<template><div><slot name="header"></slot><slot name="main"></slot><slot name="footer"></slot></div>
</template><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({name: 'ChildComponent'
});
</script>
  • 父组件
<template><ChildComponent><template v-slot:header><h1>Header Content</h1></template><template v-slot:main><p>Main Content of the Page</p></template><template v-slot:footer><footer>Footer Details</footer></template></ChildComponent>
</template><script lang="ts">
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';export default defineComponent({name: 'ParentComponent',components: {ChildComponent}
});
</script>

作用域插槽

作用域插槽(Scoped Slots)是 Vue 中一种高级的插槽用法,允许子组件将其内部的数据传递回给使用这些插槽的父组件的插槽内容。这种方式不仅可以让父组件插入 HTML 或组件,还能让父组件访问子组件中定义的数据,非常适合创建高度可定制和复用的组件。

  • 子组件
<template><ul><!-- 使用作用域插槽将 todo 对象作为插槽的数据传递给父组件 --><li v-for="todo in todos" :key="todo.id"><slot name="todo" :todo-data="todo"><!-- 默认内容,如果父组件没有提供插槽模板 -->{{ todo.text }}</slot></li></ul>
</template><script lang="ts">
import { defineComponent, PropType } from 'vue';export default defineComponent({name: 'TodoList',props: {todos: Array as PropType<Array<{ id: number; text: string }>>}
});
</script>
  • 父组件
<template><TodoList :todos="todoItems"><!-- 定义如何使用 todo 数据渲染每个待办事项 --><template v-slot:todo="{ todo }"><strong>{{ todo.text }}</strong> (ID: {{ todo.id }})</template></TodoList>
</template><script lang="ts">
import { defineComponent, ref } from 'vue';
import TodoList from './components/TodoList.vue';export default defineComponent({name: 'App',components: {TodoList},setup() {const todoItems = ref([{ id: 1, text: 'Finish the report' },{ id: 2, text: 'Meet with the client' },{ id: 3, text: 'Prepare presentation' }]);return { todoItems };}
});
</script>

子组件提供了一个todo插槽,每一个todo的数据通过todo-data传递给插槽。父组件接收这个数据并自定义了如何显示每个项目。
提示:v-slot:todo 简写 #todo='todo'

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

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

相关文章

# 代码随想录算法训练营Day31 | 理论基础 455.分发饼干 376. 摆动序列 53. 最大子序和

代码随想录算法训练营Day31 | 理论基础 455.分发饼干 376. 摆动序列 53. 最大子序和 LeetCode 455.分发饼干 题目链接&#xff1a;LeetCode 455.分发饼干 思路&#xff1a; 分别排序&#xff0c;最大的饼干给胃口最大的孩子&#xff0c;充分利用。 注意索引需要大于0 class…

神器:jQuery一键转换为纯净JavaScript代码

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 该工具将 jQuery 代码转换为现代、高效的 JavaScript。它允许您用纯 JavaScript 替换 jQuery&#xff0c;同时保持原始代码不变。 虽然 jQuery 一直是 Web 开发中…

【自动驾驶|毫米波雷达】初识毫米波雷达射频前端硬件

第一次更新&#xff1a;2024/5/4 目录 整体概述 混频器&#xff08;MIXER&#xff09; 低通滤波器&#xff08;LPF&#xff1a;Low-Pass filter&#xff09; 数模转换器&#xff08;ADC&#xff1a;Analog to Digital Converter&#xff09; 毫米波雷达功能框图 整体概述 完…

ctfshow web入门 sql注入 web224--web233

web224 扫描后台&#xff0c;发现robots.txt&#xff0c;访问发现/pwdreset.php &#xff0c;再访问可以重置密码 &#xff0c;登录之后发现上传文件 检查发现没有限制诶 上传txt,png,zip发现文件错误了 后面知道群里有个文件能上传 <? _$GET[1]_?>就是0x3c3f3d60245…

echars 的一些运用

基础图形 // 支架压力数据量统计 let splitLine { // 网格线设置show:true,lineStyle:{color:#E2E7EC,width:1,}, } let itemStyle { // 柱形图颜色color:#5B9BD5, } let axisLine { // 轴线样式lineStyle:{color:#E2E7EC,}, } let axisLabel { // 轴刻度字-样式fontSize:…

代码随想录leetcode200题之数组

目录 1 介绍2 训练3 参考 1 介绍 本博客用来记录代码随想录leetcode200题中数组部分的题目。 2 训练 题目1&#xff1a;704二分查找 C代码如下&#xff0c; class Solution { public:int search(vector<int>& nums, int target) {int res -1;int l 0, r nums…

STM32快速入门(串口传输之USART)

STM32快速入门&#xff08;串口传输之USART&#xff09; 前言 USART串口传输能实现信息在设备之间的点对点传输&#xff0c;支持单工、半双工、全全双工&#xff0c;一般是有三个引脚&#xff1a;TX、RX、SW_RX&#xff08;共地&#xff09;。不需要一根线来同步时钟。最大优…

停车场收费管理系统winfrom

停车场收费管理系统winfrom 管理员登陆后可以费用设置 修改密码 开户 充值 注销 入库 出库 退出 本项目通过dat文件格式存储数据 public static void Load() { string path Application.StartupPath "\data\data2.dat"; if (File.Exists(path)) …

4diacIDE同时编译不同版本踩坑记录

4diac不同版本依赖插件版本及jdk版本是不同的&#xff0c;当你需要搭建不同版本4diacIDE开发环境时&#xff0c;就会出现各种问题。最近一个月github上项目提交记录比较多&#xff0c;出现了不少坑。以下记录下此背景下的解决方法&#xff1a; 1、首先由于.target依赖的eclipse…

探索大语言模型在信息提取中的应用与前景

随着人工智能技术的快速发展&#xff0c;大语言模型&#xff08;LLMs&#xff09;在自然语言处理&#xff08;NLP&#xff09;领域取得了显著的进展。特别是在信息提取&#xff08;IE&#xff09;任务中&#xff0c;LLMs展现出了前所未有的潜力和优势。信息提取是从非结构化文本…

【Linux】网络接口绑定和组合的操作实例

网络接口绑定和组合的操作实例 &#xff08;一&#xff09;网卡1. 增2. 查3. 激活——设置网络接口 &#xff08;二&#xff09;网络接口绑定1. 概述2. 实验操作3. 删除绑定 &#xff08;三&#xff09;网络接口组合1. 概述2. 实验操作 &#xff08;一&#xff09;网卡 1. 增 …

Java_从入门到JavaEE_10

一、继承 概念&#xff1a;子类继承父类所有的属性和方法应用场景&#xff1a;多个类似的类&#xff0c;有相同的属性和方法&#xff0c;就可以把相同属性和方法抽取到父类继承优缺点&#xff1a; 优点&#xff1a;解决了代码的冗余缺点&#xff1a;增加了类与类之间的关联性、…

122. Kafka问题与解决实践

文章目录 前言顺序问题1. 为什么要保证消息的顺序&#xff1f;2.如何保证消息顺序&#xff1f;3.出现意外4.解决过程 消息积压1. 消息体过大2. 路由规则不合理3. 批量操作引起的连锁反应4. 表过大 主键冲突数据库主从延迟重复消费多环境消费问题后记 前言 假如有家公司是做餐饮…

041.数据流中的移动平均值

刷算法题&#xff1a; 第一遍&#xff1a;1.看5分钟&#xff0c;没思路看题解 2.通过题解改进自己的解法&#xff0c;并且要写每行的注释以及自己的思路。 3.思考自己做到了题解的哪一步&#xff0c;下次怎么才能做对(总结方法) 4.整理到自己的自媒体平台。 5.再刷重复的类…

web安全day03

MYSQL注入&#xff1a; SQL 注入的原理、危害及防御措施 SQL 注入的原理&#xff1a;原本的 SQL 语句在与用户可控的参数经过了如拼接、替换等字符串操作后&#xff0c;得到一个新的 SQL 语句并被数据库解析执行&#xff0c;从而达到非预期的效果。 SQL 注入的危害&#xff…

docker安装elasticsearch:7.17.21

docker安装elasticsearch:7.17.21 下载对应版本的docker镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:7.17.21启动容器 docker run --name elasticsearch-test -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -t docker.elastic.…

字节跳动(社招)四面算法原题

TikTok 进展 又是一期定时汇报 TikTok 进展的推文。 上周&#xff0c;美国总统拜登签署了价值 950 亿美元的一揽子对外援助法案。 该法案涉及强制字节跳动剥离旗下应用 TikTok 美国业务&#xff0c;即 针对 TikTok 非卖即禁的"强抢行为"开始进入九个月&#xff08;27…

如何使用Excel生成柱状图

一、先把数据表格填好 二、选择数据区域&#xff0c;点击插入→选择柱状图 三、选择好图表类型→插入预设图表 四、添加数据标签 单击柱状图→右击选择添加数据标签 五、效果如下

vue axios 请求过滤空值

过滤判断请求参数中是否是有字符串、空对象、空数组、null、undefined、NaN中的一个,不包含数字0 一、npm安装 lodash 包 二、request.js 请求拦截配置 point&#xff1a; 1、请求拦截器中添加对 params / data 传参的空值判断 2、针对文件上传类的接口&#xff0c;需要屏蔽…

AI大模型探索之路-训练篇17:大语言模型预训练-微调技术之QLoRA

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…