Vue3.0插槽

用法:

父组件App.vue

<template><div><!--将html代码插入到子组件中带默认名称的插槽中--><AChild><!--这段html会插入到AChild组件中<slot></slot>插槽中--><!-- 注意:写在父组件中的html代码只能在父组件中被访问到,所以这段html只能在父组件中被访问:如在App.vue中获取这段html。document.getElementById("mydiv") --><div id="mydiv">我是在App.vue组件中的一段HTML1</div> </AChild><!--将html代码插入到子组件中带具体名称的插槽中--><AChild><template v-slot="aaa">  <!--v-slot可以简写成#  如: <template #"aaa"></template> --><div>我是在App.vue组件中的一段HTML1</div><!--这段html会插入到AChild组件中<slot name="aaa"></slot>插槽中--></template></AChild><!-- 作用域插槽 --><!--作用域插槽其实就是子组件提供了数据,具体数据怎么使用与渲染,由父组件来决定--><AChild><template v-slot:bbb="myprops">  <!--v-slot:bbb="myprops"的意思就是:在AChild子组件中定义了一个名称为bbb的插槽,这个插槽向外提供了数据,这个数据由myprops来接收。如果这个插槽没有名称就直接写成v-slot="myprops"  --><button @click="handelClick(myprops)">点我</button><ul><li v-for="item in myprops.mylist" :key="item">{{item}}----这是由父组件重新渲染并覆盖了子组件中名字为bbb插槽中的内容</li></ul><div>{{myprops.mydata}}</div></template></AChild></div>
</template>
<script>
import AChild from "./components/AChild.vue" //导入AChild组件模板
export default {components: {AChild},methods:{handelClick(myprops){console.log(myprops)console.log(myprops.mylist) //输出:["中国", "美国", "俄罗斯"]console.log(myprops.mydata) //输出:"123"}}
}</script>

子组件AChild.vue

<template><div><span>我的子组件内容1</span><!-- 默认插槽 --><slot></slot><!-- 具名插槽,即带有名称的插槽 --><slot name="aaa"></slot><!-- 作用域插槽 --><!--向父组件暴露了两个数据,一个是mylist,另外一个是mydata,父组件收到这两个数据后可以根据实际情况来重写这个slot中的内容--><slot name="bbb" :mylist="datalist" mydata="123"> <ul><li v-for="item in datalist" :key="item">{{ item }}</li></ul></slot></div>
</template>
<script>
export default {data() {return {datalist: ["中国", "美国", "俄罗斯"]}}
}
</script>

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

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

相关文章

ubuntu 18.04 编译安装flexpart 10.4(2023年) —— 筑梦之路

2023年10月29日 环境说明 操作系统版本&#xff1a;ubuntu 18.04 python版本&#xff1a;3.6.9 gcc版本&#xff1a;7.5.0 编译安装路径&#xff1a;/usr/local cmake: 3.10.2 所需要的源码包我已经打包放到我的资源。 2021年1月份已经写过一篇Ubuntu 编译安装的帖子F…

电子器件 二极管

二极管主要是利用其单向导电性&#xff0c;通常用于整流、检波、限幅、元件保护等&#xff0c;在数字电路中常作为开关元件。 一、常用二极管类型 高频二极管 1N4148 等 肖特基二极管 SS14 SS34 SS54 等 快恢复二极管&#xff08;FRD&#xff09; 可以用快恢复二极管代替肖特…

YUV的红蓝颠倒(反色)的原因及解决

原因 UV排列反了。 比如说&#xff0c;NV21和YUV420SP的Y排列相同&#xff0c;UV则相反。给你YUV420SP&#xff0c;你当作NV21保存JPG&#xff0c;就会发生红蓝拿起。 解决办法 就是把UV互换一下。具体代码&#xff1a; NV21转YUV420SP的代码_nv21转yuv420格式-CSDN博客 …

【机器学习可解释性】4.SHAP 值

机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.部分依赖图4.SHAP 值5.SHAP 值 高级使用 正文 理解各自特征的预测结果&#xff1f; 介绍 您已经看到(并使用)了从机器学习模型中提取一般解释技术。但是&#xff0c;如果你想要打破模型对单个预测的工作原理? SHAP 值…

C++模板编程和标准模板库(STL)

1、C模板编程 1&#xff09;函数模板 #include <iostream> using namespace std;// 声明一个泛型类型T&#xff0c;参数化数据类型 template <typename T> // 定义一个函数模板 T man(T a, T b) {return (a>b?a:b); }int main() {// 使用的时候没有指定参数类…

开源3D激光(视觉)SLAM算法汇总(持续更新)

原文连接 目录 一、Cartographer 二、hdl_graph_slam 三、LOAM 四、LeGO-LOAM 五、LIO-SAM 六、S-LOAM 七、M-LOAM 八、livox-loam 九、Livox-Mapping 十、LIO-Livox 十一、FAST-LIO2 十二、LVI-SAM 十三、FAST-Livo 十四、R3LIVE 十五、ImMesh 十六、Point-LIO 一、Cartograph…

Elasticsearch-06-Elasticsearch Java API Client

前言 简介 在 Elasticsearch7.15版本之后&#xff0c;Elasticsearch官方将它的高级客户端 RestHighLevelClient标记为弃用状态。同时推出了全新的 Java API客户端 Elasticsearch Java API Client&#xff0c;该客户端也将在 Elasticsearch8.0及以后版本中成为官方推荐使用的客…

canvas基础3 -- 交互

点击交互 使用 isPointInPath(x, y) 判断鼠标点击位置在不在图形内 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"&…

scrapy框架爬取数据(创建一个scrapy项目+xpath解析数据+通过pipelines管道实现数据保存+中间件)

目录 一、创建一个scrapy项目 二、xpath解析数据 三、通过pipelines管道实现数据保存 四、中间件 一、创建一个scrapy项目 1.创建一个文件夹&#xff1a;C06 在终端输入以下命令&#xff1a; 2.安装scrapy:pip install scrapy 3.来到文件夹下&#xff1a;cd C06 4.创建…

拿到 phpMyAdmin 如何获取权限

文章目录 拿到 phpMyAdmin 如何获取权限1. outfile 写一句话木马2. general_log_file 写一句话木马 拿到 phpMyAdmin 如何获取权限 1. outfile 写一句话木马 尝试使用SQL注入写文件的方式&#xff0c;执行 outfile 语句写入一句话木马。 select "<?php eval($_REQU…

电商独立站前端、后端、接口协议和电商API接口请求方式

前端是做什么的&#xff1f;后端是做什么的&#xff1f;哪些事情&#xff0c;是前端做的&#xff1f;哪些事情&#xff0c;是后端做的&#xff1f;前后端一体是什么意思&#xff1f;接口、接口协议、接口请求方式…… 1、前端所写的程序&#xff0c;主要运行在客户端&#xff…

KaTex语法学习

文章目录 KaTex语法学习Examples行内的公式 Inline多行公式 Multi line KaTeX vs MathJax KaTex语法学习 katex参考资料 吴文中-数学公式编辑器 Examples 行内的公式 Inline E m c 2 Emc^2 Emc2 Inline 行内的公式 E m c 2 Emc^2 Emc2 行内的公式&#xff0c;行内的 E …

postgresql14管理(六)-备份与恢复

定义 备份&#xff08;backup&#xff09;&#xff1a;通过物理复制或逻辑导出的方式&#xff0c;将数据库的文件或结构和数据拷贝到其他位置进行存储&#xff1b; 还原&#xff08;restore&#xff09;&#xff1a;是一种不完全的恢复。使用备份文件将数据库恢复到备份时的状…

项目|金额场景计算BigDecimal使用简记

前言 在实际项目开发中&#xff0c;我们经常会遇到一些金额计算&#xff0c;分摊等问题&#xff0c;通常我们都使用java.math.BigDecimal 来完成各种计算&#xff0c;避免使用浮点数float,double来计算金额&#xff0c;以免丢失精度&#xff0c;以下是博主部分使用场景和使用Bi…

[Docker]三.Docker 部署nginx,以及映射端口,挂载数据卷

一.Docker 部署 Nginx 以及端口映射 Docker 部署 Nginx,首先需要下载nginx镜像,然后启动这个镜像,就运行了一个nginx的容器了 1.下载 nginx 镜像并启动容器 #查看是否存在nginx镜像:发现没有nginx镜像 [rootlocalhost zph]# docker images | grep nginx#下载nginx镜像 [rootl…

安装 GMP、NTL、CTMalloc ,编译 OpenFHE

参考文献&#xff1a; [ABB22] Al Badawi A, Bates J, Bergamaschi F, et al. Openfhe: Open-source fully homomorphic encryption library[C]//Proceedings of the 10th Workshop on Encrypted Computing & Applied Homomorphic Cryptography. 2022: 53-63.openfheorg/o…

【Spring】IOC容器与Bean的常用属性配置

文章目录 1.前言2.IOC容器2.1 BeanFactory 容器2.2 ApplicationContext 容器 3.Bean的常用属性配置4. 总结 1.前言 在之前的文章-IOC的快速入门中讲过Bean这个概念. 本来就来介绍容器与Bean的常用属性配置 在Spring框架中&#xff0c;Bean指的是被Spring加载生成出来的对象。 …

12、SpringCloud -- redis库存和redis预库存保持一致、优化后的压测效果

目录 redis库存和redis预库存保持一致问题的产生需求:代码:测试:优化后的压测效果之前的测试数据优化后的测试数据redis库存和redis预库存保持一致 redis库存是指初始化是从数据库中获取最新的秒杀商品列表数据存到redis中 redis的预库存是指每个秒杀商品每次成功秒杀之后…

永恒之蓝漏洞 ms17_010 详解

文章目录 永恒之蓝 ms 17_0101.漏洞介绍1.1 影响版本1.2 漏洞原理 2.信息收集2.1 主机扫描2.2 端口扫描 3. 漏洞探测4. 漏洞利用5.后渗透阶段5.1创建新的管理员账户5.2开启远程桌面5.3蓝屏攻击 永恒之蓝 ms 17_010 1.漏洞介绍 永恒之蓝&#xff08;ms17-010&#xff09;爆发于…

安装虚拟机(VMware)保姆级教程及配置虚拟网络编辑器和安装WindowsServer以及宿主机访问虚拟机和配置服务器环境

目录 一、操作系统 1.1.什么是操作系统 1.2.常见操作系统 1.3.个人版本和服务器版本的区别 1.4.Linux的各个版本 二、VMware Wworkstation Pro虚拟机的安装 1.下载与安装 注意&#xff1a;VMWare虚拟网卡 2.配置虚拟网络编辑器 三、安装配置 WindowsServer 1.创建虚拟…