vue中slot组件的使用
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。
Slot 是在组件模板中设置的用于在父组件中插入其孙子组件(即自身的子组件)或DOM片段的插槽。
匿名solt
子组件中
<div>
<h2>我是子组件的标题</h2>
<slot></slot> /*这里插入父组件在引用子组件内部的内容*/
</div>
父组件中
<div>
<h1>我是父组件的标题</h1>
<slider>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</slider>
</div>
最后结果
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
当我们要在一个组件中引入另外一个组件时,子组件就可以使用slot,父组件则引入子组件的组件名即可。
具名slot
具名Slot就是会为模板中不同部分指定相应的插入位置。但是当部分内容没有找到对应的插入位置,就会依次插入匿名的slot中,
当没有找到匿名slot时,这段内容就会被抛弃掉。
子组件中
<div>
<slot name="header"></slot>
<slot name="footer"></slot>
<slot></slot>
</div>
父组件中
<slider>
<p>Lack of anonymous slot, this paragraph will not shown.</p>
<p slot="footer">Here comes the footer content</p>
<p slot="header">Here comes the header content</p>
</slider>
最后结果
<div>
<p>Here comes the header content</p>
<p>Here comes the footer content</p>
<p>Lack of anonymous slot, this paragraph will not shown.</p>
</div>
这是slot的基本用法,其他用法可参考:
https://www.w3cplus.com/vue/vue-slot.html
vue中slot组件的使用的更多相关文章
- Vue 中的组件
VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...
- Vue中keep-alive组件的理解
对keep-alive组件的理解 当在组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能等问题,使用<keep-alive>包裹动态组件时,会缓存不活动的组件实例, ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue 中数据流组件
好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...
- 简述vue中父子组件是怎样相互传递值的(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
随机推荐
- 【Oracle】ORA-00054: resource busy and acquire with NOWAIT specified or timeout expired
出现此错误的原因是因为事务等待造成的,找出等待的事务,kill即可. 下面是我当时遇到的错误: ---删除表t1时出现错误 SCOTT@GOOD> drop table t1; drop tab ...
- PCL:解决PCL和OpenCV冲突的方法
不是PCL的问题,而是OpenCV的问题. (1):先包含PCL库,再包含OpenCV库: (2):把里面的UCHAR冲突全部换掉! 如果你有闲情逸致,用正则表达式 慢慢替换去吧! (3):或者把F ...
- 配置H3C交换机ftp服务
配置H3C交换机ftp服务,用于与交换机进行文件上传.下载,常用于更新程序上传及配置备份文件下载. 准备工作:三层设备(路由器.三层交换机等)至少一个接口配置IP,二层交换机需配置一个处于UP状态的v ...
- PHP中调用Soap/WebService
关于在PHP中如何调用Soap/WebService的描述,网络上有不少帖子.但是主要讲述了如何用PHP开发服务器端.客户端并加以关联,而很少触及在PHP中调用现成的WebService的情况.在本文 ...
- 洛谷P1427 小鱼的数字游戏
题目描述 小鱼最近被要求参加一个数字游戏,要求它把看到的一串数字(长度不一定,以0结束,最多不超过100个,数字不超过2^32-1),记住了然后反着念出来(表示结束的数字0就不要念出来了).这对小鱼的 ...
- 2016年工作中遇到的问题1-10:select-for-update锁表
1.select... for update锁表.注意事项:事务下使用,@Transactional如果用主键,只锁住1行记录如果不用主键,会锁住多条记录,mysql下测试,查询1条,锁住1行,查询2 ...
- Jenkins学习总结(6)——了解DevOps的前世今生
DevOps是什么?从哪里来? DevOps的概念 DevOps一词的来自于Development和Operations的组合,突出重视软件开发人员和运维人员的沟通合作,通过自动化流程来使得软件构建. ...
- Profile 动态切换环境
一.多 Profile 文件我们在主配置文件编写的时候,文件名可以是 application-{profile}.properties/yml默认使用 application.properties 的 ...
- 计算机-award BIOS全教程
- chrome隐身模式无法播放flash的解决办法
困扰很多天的chrome无法播放flash的问题终于解决了 因为之前一直用隐身模式,一直不能播放flash,重装chrome,重装插件,还是不行 结果今天发现正常模式是可以播放的,所以找了一下chro ...