vue知识点————插槽 slot

slot 插槽 在父组件中引用的子组件 在父组件中写入百度 可在子组件slot插槽中展示出

父组件

<template><div id="app"><child url="https://www.baidu.com">百度</child></div>
</template><script>
import child from "./components/child.vue";export default {name: "App",components: {child,},
};
</script><style>
</style>

子组件

<template><div class="child"><a :href="url"><slot></slot></a></div>
</template><script>
export default {name: "nav_child",props: ["url"],
};
</script>

在这里插入图片描述

插槽的作用域

父组件

<template><div id="app"><child url="https://www.baidu.com">百度---{{ user.name }}</child></div>
</template><script>
import child from "./components/child.vue";export default {name: "App",components: {child,},data() {return {user: {name: "作用域",},};},
};
</script><style>
</style>

子组件

<template><div class="child"><a :href="url"><slot></slot></a></div>
</template><script>
export default {name: "nav_child",props: ["url"],
};
</script>

在这里插入图片描述
这里父组件可以访问父组件的数据并且可在slot中展示到,不可以在父组件中访问子组件的数据,就相当于父组件百度—{{ user.name }}{{ url }}
这里的url是访问不到的 会报错,想拿到子组件的数据请看下面的代码

具名插槽

父组件

<template><div id="app"><child><template v-slot:header><h1>header是标题</h1></div><template><p>这是一段内容在匿名插槽中显示</p></template><template v-slot:footer><p>footer是底部</p></template></child></div>
</template><script>
import child from "./components/child.vue";export default {name: "App",components: {child,},data() {return {};},
};
</script><style>
</style>

子组件

<template><div class="child"><header><slot name="header"></slot></header><main><!-- 匿名 --><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template><script>
export default {name: "nav_child",
};
</script>

在这里插入图片描述

插槽中指定name 拿到对应的数据展示,如果没有知道成为匿名也就拿没有定义name的数据

插槽父组件访问子组件数据

父组件

<template><div id="app"><child url="https://www.baidu.com" v-slot="slotProp">百度---{{ user.name }}地址为{{ slotProp.url }}</child></div>
</template><script>
import child from "./components/child.vue";export default {name: "App",components: {child,},data() {return {user: {name: "作用域",},};},
};
</script><style>
</style>

子组件

<template><div class="child"><a :href="url"><slot :url="url"></slot></a></div>
</template><script>
export default {name: "nav_child",props: ["url"],
};
</script>

在这里插入图片描述

通过子组件在slot 上传递url值 在父组件中利用v-slot='slotProp’这样就可以拿到子组件的数据并展示出来

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

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

相关文章

VMware 安装 黑群晖7.1.1-42962 DS918+

本例的用的文件 1、ARPL 1.0beat 引导文件 vmdk格式&#xff1a; https://download.csdn.net/download/mshxuyi/88309308 2、DS918_42962.pat&#xff1a;https://download.csdn.net/download/mshxuyi/88309383 一、引导文件 1、创建一个虚拟机 2、下一步&#xff0c;选稍后…

使用ChatGLMTokenizer处理json格式数据

我下载了一些中文wikipedia数据&#xff0c;准备采用ChatGLMTokenizer对齐进行清洗&#xff0c;整理为预训练语料。 import numpy as np import json from tqdm import tqdm from chatglm_tokenizer.tokenization_chatglm import ChatGLMTokenizertokenizer ChatGLMTokenizer…

PPT 架构师三板斧

PPT 架构师三板斧 目录概述需求&#xff1a; 设计思路实现思路分析1.多节点上PPT 架构师三板斧2.几张框框组合有组织3.专业词汇4.切记点要点 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;ski…

PyCharm下载安装

PyCharm下载链接 点击下载PyCharm Community Edition社区版&#xff08;PyCharm Professional专业版需要收费&#xff0c;但可以免费试用 30 天&#xff0c;也可以找到激活方式&#xff1b;而社区版是完全免费的&#xff0c;初学者学习 Python建议使用社区版&#xff0c;不会有…

人工智能在电子商务中的突破性优势

最近都听说人工智能&#xff08;AI&#xff09;吗&#xff1f;电子商务的人工智能方面尤其受欢迎。当您以正确的方式使用正确的 AI技术时&#xff0c;您可以彻底改变您的经营方式。AI可帮助您节省时间、减少手动工作并提高数据的质量和准确性。 从本质上讲&#xff0c;您现在可…

C++ 围炉札记

文章目录 内存检测ProtoBufCMake、vscode、clion、Qt右值1、临时变量右值引用2、右值引用本质 函数返回std::functionPOD&#xff08;Plain Old Data&#xff09;thread_localnew / delete1、定位new运算符 可变参数模板typename和class1、C模板类头文件和实现文件分离的方法2、…

nested exception is java.io.FileNotFoundException

完整的错误信息&#xff1a; [main] ERROR o.s.boot.SpringApplication - Application run failed org.springframework.beans.factory.BeanDefinitionStoreException: Failed to parse configuration class [com.heima.article.ArticleApplication]; nested exception is java…

PostMan传时间参数一次性发送多次请求

文章目录 1. Date类型的参数&#xff0c; "date": "2023-09-07 22:01:51"格式会报错2. 在Pre-request Script预置时间3. 使用postman一次性发送多次请求 1. Date类型的参数&#xff0c; “date”: "2023-09-07 22:01:51"格式会报错 2. 在Pre-req…

如何查看MySQL的安装位置

MySQL的安装位置 1、查看安装目录 参数 路径 解释 备注 --basedir /usr/bin 相关命令目录 mysqladmin mysqldump等命令 --datadir /var/lib/mysql/ mysql 数据库文件的存放路径 --plugin-dir /usr/lib64/mysql/plugin mysql插件存放路径 --log-error …

基于pytorch LSTM 的股票预测

学习记录于《PyTorch深度学习项目实战100例》 https://weibaohang.blog.csdn.net/article/details/127365867?ydrefereraHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MjU2MTYyL2NhdGVnb3J5XzEyMDM2MTg5Lmh0bWw%2Fc3BtPTEwMDEuMjAxNC4zMDAxLjU0ODI%3D 1.tushare Tushare是一个免费、…

Mariadb高可用(四十)

目录 一、概述 &#xff08;一&#xff09;概念 &#xff08;二&#xff09;组成 &#xff08;三&#xff09;特点 &#xff08;四&#xff09;工作原理 二、实验要求 三、构建MHA &#xff08;一&#xff09;ssh免密登录 &#xff08;二&#xff09;安装mariadb数据库…

【工作技术栈】【源码解读】一次springboot注入bean失败问题的排查过程

目录 前言现象分析原因解决方法思考感悟 前言 对这次的过程排查如果要形容的话&#xff0c;我觉得更像是悬疑剧&#xff0c;bean not found 这种错误&#xff0c;已经看腻了&#xff0c;甚至有时候都看不起这种错误&#xff0c;但是似乎这个想法被springboot听见了&#xff0c…

云服务器下如何部署Flask项目详细操作步骤

参考网上各种方案&#xff0c;再结合之前学过的Django部署方案&#xff0c;最后确定Flask总体部署是基于&#xff1a;centos7nginxuwsgipython3Flask之上做的。 本地windows开发测试好了我的OCR项目&#xff0c;现在要部署我的OCR项目到云服务器上验证下。 第一步&#xff1a…

java 整合 swagger-ui 步骤

1.在xml 中添加Swagger 相关依赖 <!-- springfox-swagger2 --><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><!-- springfox-swa…

Git 命令行查看仓库信息

目录 查看系统config ​编辑查看当前用户&#xff08;global&#xff09;配置 查看当前仓库配置信息 查看系统config git config --system --list 1 查看当前用户&#xff08;global&#xff09;配置 git config --global --list 1 查到的是email , name 等ssl签名信息&a…

测试岗位的不足和缺点-思考

软件测试岗位在实际工作中可能会面临一些不足和缺点&#xff0c;以下是一些常见的问题&#xff1a; 高压力、高强度的工作&#xff1a;软件测试工作往往需要在项目截止日期前完成测试&#xff0c;这可能会带来巨大的压力。同时&#xff0c;如果开发团队在项目中进行了大量的更改…

CRM软件系统能否监控手机的使用

CRM可以监控手机吗&#xff1f;答案是不可以。CRM是一款帮助企业优化业务流程&#xff0c;提高销售效率的工具。例如Zoho CRM&#xff0c;最多也就是听一下销售的通话录音&#xff0c;却不可以监控手机&#xff0c;毕竟CRM不是一款监控软件。 CRM的主要作用有以下几点&#xf…

《Go 语言第一课》课程学习笔记(十四)

接口 认识接口类型 接口类型是由 type 和 interface 关键字定义的一组方法集合&#xff0c;其中&#xff0c;方法集合唯一确定了这个接口类型所表示的接口。type MyInterface interface {M1(int) errorM2(io.Writer, ...string) }我们在接口类型的方法集合中声明的方法&#…

深入探索KVM虚拟化技术:全面掌握虚拟机的创建与管理

文章目录 安装KVM开启cpu虚拟化安装KVM检查环境是否正常 KVM图形化创建虚拟机上传ISO创建虚拟机加载镜像配置内存添加磁盘能否手工指定存储路径呢&#xff1f;创建成功安装完成查看虚拟机 KVM命令行创建虚拟机创建磁盘通过命令行创建虚拟机手动安装虚拟机 KVM命令行创建虚拟机-…

攻防世界-WEB-ics-05

打开靶机 只有设备维护中心可以点开 点标签得到新的url pageindex 想到文件包含漏洞&#xff08;URL中出现path、dir、file、pag、page、archive、p、eng、语言文件等相关关键字眼 利用php伪协议查看源码 出现一段base64源码&#xff0c;进行转码得出源码 ?pagephp://filter…