vue 插槽 【slot】

文章目录

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

默认插槽

父组件中:<Category title="今日热门游戏"><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></Category>
子组件中:<template><div class="item"><h3>{{ title }}</h3><!-- 默认插槽 --><slot></slot></div></template>

Category 这个标签里面的ul 会传到slot 里面

具名插槽

按照不同的名字插入到不同的插槽

父组件中:<Category title="今日热门游戏"><template v-slot:s1><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></template><template #s2><a href="">更多</a></template></Category>
子组件中:<template><div class="item"><h3>{{ title }}</h3><slot name="s1"></slot><slot name="s2"></slot></div></template>

作用域插槽

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

  2. 具体编码:
    就是数据在卡槽内部,你要调用卡槽内部的数据 你需要怎么办

父组件中:<Game v-slot="params"><!-- <Game v-slot:default="params"> --><!-- <Game #default="params"> --><ul><li v-for="g in params.games" :key="g.id">{{ g.name }}</li></ul></Game>子组件中:<template><div class="category"><h2>今日游戏榜单</h2><slot :games="games" a="哈哈"></slot></div></template><script setup lang="ts" name="Category">import {reactive} from 'vue'let games = reactive([{id:'asgdytsa01',name:'英雄联盟'},{id:'asgdytsa02',name:'王者荣耀'},{id:'asgdytsa03',name:'红色警戒'},{id:'asgdytsa04',name:'斗罗大陆'}])</script>

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

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

相关文章

9. 机器人数目

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 少年宫新近邮购了小机器人配件&#xff0c;共有3类。 &#x1d434;A 类含有&#xff1a;88 个轮子&#xff0c;11 个传感器&#xff1b; &#x1d435;B 类含有:…

深入理解基本数据结构:栈详解

引言 在计算机科学中&#xff0c;数据结构是存储、组织和管理数据的方式。栈是一种重要的线性数据结构&#xff0c;广泛应用于各种编程场景。在这篇博客中&#xff0c;我们将详细探讨栈的定义、特点、操作及其在不同编程语言中的实现。 什么是栈&#xff1f; **栈&#xff08…

java动态代理的使用和代码示例

文章目录 1. 简介2. 代码3. 参考链接 1. 简介 代理类在程序运行时创建的代理方式被成为动态代理。在静态代理中&#xff0c;代理类&#xff08;RenterProxy&#xff09;是自己已经定义好了的&#xff0c;在程序运行之前就已经编译完成。而动态代理是在运行时根据我们在Java代码…

前端vue 实现取色板 的选择

大概就是这样的 一般的web端框架 都有自带的 的 比如 ant-design t-design 等 前端框架 都是带有这个的 如果遇到没有的我们可以自己尝试开发一下 简单 的 肯定比不上人家的 但是能用 能看 说的过去 我直接上代码了 其实这个取色板 就是一个input type 是color 的input …

CTF学习记录(一)——Web基础

目录 Web基础Web基础常用工具ncat(网络工具中的瑞士军刀&#xff0c;功能齐全)curl(一个工作在命令行的发起HTTP请求的工具)BurpSuite(Web核心抓包工具)Hackbar插件SwitchyOmega 代理插件&#xff08;非常牛逼&#xff09;Wappalyzer 技术判断插件EditThisCookie 插件Postman 接…

深入理解Spring Boot中的定时任务调度

深入理解Spring Boot中的定时任务调度 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. Spring Boot中的定时任务概述 在现代应用程序开发中&#xff0c;定时任务调度是一项非常常见和重要的功能…

【计算机网络03】不花钱怎么搭建一个网络实验室

使用GNS3和虚拟机搭建网络实验室 1、安装抓包工具分析数据包2、定义和使用抓包筛选器3、安装和配置GNS34、配置路由器和VPCS5、使用WireShark捕获GNS3网络数据包6、VMware创建虚拟机7、使用思科PacketTracer 1、安装抓包工具分析数据包 官网安装wireshark&#xff1a;https://…

python怎么判断字符串以什么结尾

在python编辑器中新建一个data.py。 写上自己的注释。 然后新建一个变量testname。 利用endswith来判断字符串是不是以“ar”结尾。 将结果打印出来。 选择“run”->“run”。 运行该程序&#xff0c;如果是&#xff0c;就会返回true。

JavaScript-日期对象

日期对象 作用&#xff1a;用来表示时间的对象 获取当前时间 const datenew Date();console.log(date);可以得到日期对象&#xff0c;里面的属性有星期&#xff0c;年月日&#xff0c;时分秒 获取指定时间 const datenew Date(2023-05-01);console.log(date); 获取时间戳 时间…

PyTorch深度学习实战(45)——强化学习

PyTorch深度学习实战&#xff08;45&#xff09;——强化学习 0. 前言1. 强化学习基础1.1 基本概念1.2 马尔科夫决策过程1.3 目标函数1.4 智能体学习过程 2. 计算状态值3. 计算状态-动作值4. Q 学习4.1 Q 值4.2 Gym环境4.3 构建 Q 表4.4 探索-利用策略 小结系列链接 0. 前言 强…

悠律凝声环开放式耳机体验:强劲低音、高颜值设计

最近发现了一款潮酷的开放式耳机&#xff0c;不仅颜值抗打&#xff0c;更重要的是能在嘈杂的环境中提供给我一份宁静的沉浸式音乐体验&#xff0c;号称是开放音频中的重低音之王&#xff0c;它就是悠律凝声环开放式耳机。 这款耳机无论其外观设计、音质效果、性价比以及续航能力…

通勤数据:Comma2k19 数据集

A Commute in Data: The comma2k19 Dataset 通勤数据&#xff1a;Comma2k19 数据集 https://arxiv.org/pdf/1812.05752v1 Abstract— comma.ai presents comma2k19, a dataset of over 33 hours of commute in California’s 280 highway. This means 2019 segments, 1 minut…

js实现寻找数组中满足某个条件的对象,以及找到下标后,在数组中插入某个对象

let ItemIndex fileList.findIndex((item) > { return item.xxx 你要找的属性值 }); if(ItemIndex > -1){ // 代表找到了这个元素 } else { } 参考百度AI: 在JavaScript中&#xff0c;‌可以使用splice()方法在指定位置插入一个或多个对象到数组…

npm、cnpm、pnpm、yarn的区别

npm, cnpm, pnpm, 和 yarn 都是 JavaScript 的包管理工具&#xff0c;用于自动化处理包的安装、更新、配置和管理。它们之间的主要区别在于它们各自的实现方式、性能优化、以及一些特有的功能。 npm npm (Node Package Manager) 是 Node.js 的默认包管理器&#xff0c;也是最…

「媒体邀约」上海请媒体的费用

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 上海无疑是最具活动的城市之一&#xff0c;各种大大小小的论坛、发布会、展览展会应接不暇&#xff0c;那么在上海做活动想邀请媒体进行宣传报道&#xff0c;需要多少费用呢&#xff1a;…

Android --- 运行时Fragment如何获取Activity中的数据,又如何将数据传递到Activity中呢?

1.通过 getActivity() 方法获取 Activity 实例&#xff1a; 在 Fragment 中&#xff0c;可以通过 getActivity() 方法获取当前 Fragment 所依附的 Activity 实例。然后可以调用 Activity 的公共方法或者直接访问 Activity 的字段来获取数据。 // 在 Fragment 中获取 Activity…

手慢无,速看︱PMO大会内部学习资料

全国PMO专业人士年度盛会 每届PMO大会&#xff0c;组委会都把所有演讲嘉宾的PPT印刷在了会刊里面&#xff0c;供大家会后回顾与深入学习。 第十三届中国PMO大会-会刊 《2024第十三届中国PMO大会-会刊》 &#xff08;内含演讲PPT&#xff09; 会刊&#xff1a;750个页码&…

代码随想录-DAY④-链表——leetcode 24 | 19 | 142

24 思路 如果 pre 的后面没有节点或者只有一个节点&#xff0c;则没有更多的节点需要交换, 否则&#xff0c;通过更新节点的指针关系交换 pre 后面的两个节点&#xff0c; 最后&#xff0c;返回新的链表的头节点 dummyhead->next。 时间复杂度&#xff1a;O(n) 空间复杂…

buuctf面具下的flag

细节: 这道题可能因为是vmdk的原因 导致在window上 7z无法得到全部的信息 所以最后解压要在linux系统上 解密网站 Brainfuck/Ook! Obfuscation/Encoding [splitbrain.org] 这道题010打开,可以发现里面隐藏了很多 binwalk解压 两个文件 vmdk可以直接 用7z解压 7z x flag.…

Mysql如何高效ALTER TABL

ALTER TABLE 缺点 MySQL 的ALTER TABLE 操作的性能对大表来说是个大问题。 MySQL MySQL 执行大部分修改表结构操作的方法是用新结构的 创建一个&#xff0c;空表从旧表中查出所有数据插入&#xff0c;新表然后删除旧。表这样操作可能需要花费很长&#xff0c;时间 如内果存不…