【vue】slot 匿名插槽 / 具名插槽

  • slot
  • 父组件向子组件传递数据

匿名插槽–直接写

在这里插入图片描述
在这里插入图片描述

具名插槽–指定名称

父组件中
在这里插入图片描述

子组件中:
在这里插入图片描述

代码

App.vue

<template><h2>App.vue</h2><!-- 匿名插槽 --><Header><a href="1234567890.com">1234567890</a></Header><!-- 具名插槽 --><Footer><template v-slot:url><a href="abcdefg.com">abcdefg</a></template></Footer></template><script setup>
import { ref, reactive, provide } from "vue";import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";</script><style lang="scss" scoped></style>

Header.vue

<template><h2>Header.vue</h2><slot/>
</template><script setup>
import { inject } from 'vue'</script><style lang="scss" scoped></style>

Foot.vue

<template><h2>Footer.vue</h2><slot name="url"/>
</template><script setup></script><style lang="scss" scoped></style>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

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

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

相关文章

Vue2基础知识

钩子函数created()和mount()区别 created()是在创建数据代理之后执行的&#xff0c;mount()是在将虚拟dom渲染成真实dom之后执行的 vue的数据代理和数据劫持 开发者工具里获取vue中data的一个数据时可以看到有一个{...},在我们点击之后才能获取到数据。 这是因为vue在初始化…

常用的过滤网站扫描网站攻击的路径是那些,比如:/etc/passwd等

网站攻击中经常被尝试的路径主要包括利用漏洞获取敏感文件、执行系统命令或者注入恶意代码的尝试。以下是一些常见的被攻击者尝试访问的路径和文件&#xff0c;这些通常在网络入侵检测系统&#xff08;IDS&#xff09;和网络防火墙的过滤规则中被特别关注&#xff1a; 系统文件…

LLM大语言模型微调方法和技术汇总

本文详细介绍了机器学习中的微调技术&#xff0c;特别是在预训练模型上进行微调的方法和技术。文章首先解释了什么是微调&#xff0c;即在预训练模型的基础上&#xff0c;通过特定任务的数据进行有监督训练&#xff0c;以提高模型在该任务上的性能。随后&#xff0c;详细介绍了…

C++格式化输出开源库fmt入手教程

fmt项目快速上手指南 1. cmake环境配置 include(FetchContent) FetchContent_Declare(fmtGIT_REPOSITORY https://github.com/fmtlib/fmtGIT_TAG 10.0.0GIT_SHALLOW TRUE) # 1. 下载fmt库 FetchContent_MakeAvailable(fmt)add_executable(fmt_guide main.cpp) # 2. 链接fmt库…

【opencv】示例-minarea.cpp 如何寻找一组随机生成的点的最小外接矩形、三角形和圆...

// 包含OpenCV库的高GUI模块和图像处理模块的头文件 #include "opencv2/highgui.hpp" #include "opencv2/imgproc.hpp"// 包含标准输入输出流的头文件 #include <iostream>// 使用命名空间cv和std&#xff0c;这样我们就可以直接使用OpenCV和标准库的…

docker-compose部署traefik负载本机docker-pxc集群

一.下载docker-compose https://download.csdn.net/download/cyw8998/89093489 2.172 https://download.csdn.net/download/cyw8998/89122396 2.5 拷贝到/usr/local/bin中&#xff0c;并赋权限chmod x /usr/local/bin/docker-compose 二.安装docker traefik:v2.4 dock…

Android开发:Camera2+MediaRecorder录制视频后上传到阿里云VOD

文章目录 版权声明前言1.Camera1和Camera2的区别2.为什么选择Camera2&#xff1f; 一、应用Camera2MediaPlayer实现拍摄功能引入所需权限构建UI界面的XMLActivity中的代码部分 二、在上述界面录制结束后点击跳转新的界面进行视频播放构建播放界面部分的XMLActivity的代码上述代…

WebLogic-XMLDecoder(CVE-2017-10271)反序列化漏洞分析及复现

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

OpenCV轻松入门(六)——简单图片处理【马赛克、毛玻璃、浮雕效果】

马赛克效果 马赛克指现行广为使用的一种图像&#xff08;视频&#xff09;处理手段&#xff0c;此手段将影像特定区域的色阶细节劣化并造成色块打乱的效果&#xff0c;因为这种模糊看上去有一个个的小格子组成&#xff0c;便形象的称这种画面为马赛克。其目的通常是使之无法辨…

并发的三大特性之一:原子性

在并发编程中&#xff0c;原子性是指在一次操作或多个操作中&#xff0c;要么所有的操作全部完成&#xff0c;要么全部都不完成&#xff0c;不会出现中间状态。如果一个操作是原子的&#xff0c;那么这个操作在多线程环境下不会被线程调度机制中断。 为什么需要原子性&#xf…

Unity让地图素材遮挡人物

点击编辑/项目设置/图形&#xff0c;透明度排序模式设置自定义轴&#xff0c;透明度排序轴Y设置为1其他为0。 此时人物和地图素材的图层排序相等&#xff0c;当人物的高度大于地图素材时&#xff0c;人物则被遮挡。

apache-zookeeper-3.8.1单机安装

zookeeper单机版安装 下载 https://zookeeper.apache.org/releases.html选择Apache ZooKeeper 3.8.1(asc, sha512) 创建目录 mkdir -p /usr/local/zookeeper/apache-zookeeper-3.8.1-bin/data上传服务器并解压 tar -zxvf apache-zookeeper-3.8.1-bin.tar.gz -C /usr/local…

C# 图形化的导航界面的设计方法

目录 一、涉及到的知识点 1、BackColor属性 2、FlatStyle属性 3、TextlmageRelation属性 4、其它共性设计 二、设计实例 1、 Resources.Designer.cs 2、Form1.Designer.cs 3、Form1.cs 4、运行结果 图形化导航用于代替文字导航&#xff0c;比如对Button控件 进行图形…

222 基于matlab的天线线性阵列分布

基于matlab的天线线性阵列分布。运用遗传算法&#xff0c;对天线的庞斑进行优化&#xff0c;得到最佳的线性阵列的分布。输出迭代曲线&#xff0c;主平面方向图&#xff0c;阵元放置位置。程序已调通&#xff0c;可直接运行。 222 天线线性阵列分布 - 小红书 (xiaohongshu.com…

底层开发必知的三个内存结构概念

大家好&#xff0c;今天给大家介绍底层开发必知的三个内存结构概念&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 在底层开发中&#xff0c;以下是三个关键的内存结构概念&…

常见的数据结构

链表 链表&#xff1a;适用于插入删除多、读少的场景。 链表在新增、删除数据都比较容易&#xff0c;可以在 O(1) 的时间复杂度内完成。 但对于查找&#xff0c;不管是按照位置的查找还是按照数值条件的查找&#xff0c;都需要对全部数据进行遍历。这显然就是 O(n) 的时间复杂…

爱奇艺APP Android低端机性能优化

01 背景介绍 在智能手机市场上&#xff0c;高端机型经常备受瞩目&#xff0c;但低端机型亦占据了不可忽视的份额。众多厂商为满足低端市场的需求&#xff0c;不断推出低配系列手机。另外过去几年的中高端机型&#xff0c;随着系统硬件的快速迭代&#xff0c;现已经被归类为低端…

【大语言模型】轻松本地部署Stable Diffusion

硬件要求&#xff1a; 配备至少8GB VRAM的GPU&#xff0c;如果你的电脑只有CPU&#xff0c;请看到最后。根据部署规模&#xff0c;需要足够的CPU和RAM。 软件要求&#xff1a; Python 3.7或更高版本。支持NVIDIA GPU的PyTorch。Hugging Face的Diffusers库。Hugging Face的Tr…

4.2 面向对象程序设计-类的继承实验

本文仅供学习交流&#xff0c;严禁用于商业用途&#xff0c;如本文涉及侵权请及时联系将于24小时内删除 目录 1.实验内容 2.实验原理 2.1类的继承 2.2 继承的优点和缺点 2.3 继承的方式 3.实验代码 1.实验内容 创建一个父类CalcTime&#xff0c;在父类中依次定义用于保存…

前端面试题大合集

1、bind函数的实现过程 // 简化实现&#xff0c;完整版实现中的第 2 步 Function.prototype.bind function (context) {var self this;// 第 1 个参数是指定的 this&#xff0c;截取保存第 1 个之后的参数// arr.slice(begin); 即 [begin, end]var args Array.prototype.sl…