vue 关于solt得用法
2024-10-19 07:35:21
solt
第一种用法
父组件
<templateSolt></templateSolt>
<templateSolt>
<p>slot分发了内容</p>
</templateSolt>
子组件
<div>
<h1>这是slot子组件</h1>
<slot>
如果slot没有分发内容。
</slot>
</div>
效果图如下
我得理解,slot在父组件有内容时,显示为父组件得内容,覆盖了子组件,如果父组件没有内容,则显示子组件
第二种用法
这种用法是我们用得比较多得,这种是具名得slot
父组件
<templateSlotNamed>
<h1 slot="footer">footer</h1>
<h1 slot="header">header</h1>
<h1>Default content</h1>
</templateSlotNamed>
子组件
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
效果图如下
我把父组件的header和footer更换了位置,
是为了证明一件事,就是实际内容的显示是由子组件的位置决定的。
最新文章
- 将GridView数据导入到excel,并提供下载
- Centos安装vsftp服务
- org.springframework.beans.MutablePropertyValues.add
- ML 04、模型评估与模型选择
- RMAN_Oracle RMAN的常用Configure配置
- IOS 类别
- 1185: [HNOI2007]最小矩形覆盖 - BZOJ
- windows8安装xna4.0不能开发Xbox和PC端游戏的解决办法
- nyoj 123 士兵杀敌(四) 树状数组【单点查询+区间修改】
- ECMAScript 6 笔记(四)
- FPGA学习:VHDL设计灵活性&不同设计思路比较
- Java常用异常整理
- ajax获取数据中文显示问号
- 解决stackoverflow打开慢的问题
- 一个linux 4.9,4.14内核的bbr带宽估计偏低问题
- Error:java: invalid source release 无效的源发行版: 8
- Spring Boot入门第一天:Hello, Spring Boot!
- ERROR 1290 (HY000): The MySQL server is running with the --skip-grant-tables option so it cannot exe
- 【ML】人脸识别
- DDMS调试信息
热门文章
- vue运行时 eslint 报“import/first” WARN deprecated browserslist 问题解决
- transition属性值
- redis重要知识点
- 8、Spring-Kafka Recving Messages
- UI自动化(四)css样式
- iOS开发 -------- AFNetworking实现简单的断点下载
- 在数据库级别还是在service层进行级联删除
- [译]课程 1: 使用 Quartz
- android中SELINUX规则分析和语法简介【转】
- 转载:如何搭建turn server 在centos7上。