vue 中的slot属性(插槽)的使用
总结如下:
VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”的想法,于是就关闭了VUE的说明文档。
实际上,插槽的概念很简单,下面通过分三部分来讲,这三部分也是按照VUE说明文档的顺序来写的。
进入这三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是槽,是组件的一块HTML模板,这块模板显示不显示,以及怎样显示由父组件来决定。 实际上,一个时隙最核心的两个问题在这里就点出来了,的英文显示不显示状语从句:怎样显示。
由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类。非插槽模板指的是html模板,比如'DIV,跨度,UL,表'这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制;插槽模板是狭槽,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的HTML模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就显示在什么位置。
单个插槽| 默认插槽| 匿名插槽
首先是单个插槽,单个插槽的英文VUE的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置名称属性。
单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一个组件中只能有一个该类插槽。相对应的,具名插槽就可以有很多个,只要名字(名称属性)不同就可以了。
下面通过一个例子来展示。
父组件:
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
</child>
</div>
</template>
子组件:
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
在这个例子里,因为父组件在里面写了HTML模板,子那么组件的匿名来自插槽这块模板就是下面这样。也就是说,子组件的匿名插槽被使用了,是被下面这块模板使用了。
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
最终的渲染结果如图所示:
注:所有demo都加了样式,以方便观察。其中,父组件以灰色背景填充,子组件都以浅蓝色填充。
具名插槽
匿名插槽没有名称属性,所以是匿名插槽,那么,插槽加了名称属性,就变成了具名插槽。具名插槽可以在一个组件中出现Ñ次,出现在不同的位置。下面的例子,一个就是有两个具名插槽状语从句:单个插槽的组件,这三个插槽被父组件用同一套的CSS样式显示了出来,不同的是内容上略有区别。
父组件:
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
<div class="tmpl" slot="down">
<span>菜单-1</span>
<span>菜单-2</span>
<span>菜单-3</span>
<span>菜单-4</span>
<span>菜单-5</span>
<span>菜单-6</span>
</div>
<div class="tmpl">
<span>菜单->1</span>
<span>菜单->2</span>
<span>菜单->3</span>
<span>菜单->4</span>
<span>菜单->5</span>
<span>菜单->6</span>
</div>
</child>
</div>
</template>
子组件:
<template>
<div class="child">
// 具名插槽
<slot name="up"></slot>
<h3>这里是子组件</h3>
// 具名插槽
<slot name="down"></slot>
// 匿名插槽
<slot></slot>
</div>
</template>
显示结果如图:
可以看到,父组件通过HTML模板上的槽属性关联具名插槽。没有槽属性的HTML模板默认关联匿名插槽。
作用域插槽| 带数据的插槽
最后,就是我们的作用域插槽。这个稍微难理解一点。官方叫它作用域插槽,实际上,对比前面两种插槽,我们可以叫它带数据的插槽。什么意思呢,就是前面两种,都是在组件的模板里面写
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
但是作用域插槽要求,在槽上面绑定数据。也就是你得写成大概下面这个样子。
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
我们前面说了,插槽最后显示不显示是看父组件有没有在孩子下面写模板,像下面那样。
<child>
html模板
</child>
写了,插槽就总得在浏览器上显示点东西,东西就是html该有的模样,没写,插槽就是空壳子,啥都没有。OK,我们说有html模板的情况,就是父组件会往子组件插模板的情况,那到底插一套什么样的样式呢,这由父组件的HTML + CSS共同决定,但是这套样式里面的内容呢?
正因为作用域插槽绑定了一套数据,父组件可以拿来用于是,情况就变成了这样:样式父组件说了算,但内容可以显示子组件插槽绑定的。
我们再来对比,作用域插槽跟单个插槽和具名插槽的区别,因为单个插槽和具名插槽不绑定数据,所以父组件提供的模板一般要既包括样式又包括内容,上面的例子中,你看到的文字“菜单1”,“菜单2”都是父组件自己提供的内容;而作用域插槽,父组件只需要提供一套样式(在确实用作用域插槽绑定的数据的前提下)。
下面的例子,你就能看到,父组件提供了三种样式(分别是柔性,UL,直接显示),都没有提供数据,数据使用的都是子组件插槽自己绑定的那个数组(一堆人名的那个数组)。
父组件:
<template>
<div class="father">
<h3>这里是父组件</h3>
<!--第一次使用:用flex展示数据-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template> </child> <!--第二次使用:用列表展示数据-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template> </child> <!--第三次使用:直接显示数据-->
<child>
<template slot-scope="user">
{{user.data}}
</template> </child> <!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>
子组件:
<template>
<div class="child"> <h3>这里是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template> export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
vue 中的slot属性(插槽)的使用的更多相关文章
- vue中的slot(插槽)
vue中的插槽----slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. ...
- vue中的slot与slot-scope
深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 vue插槽详解
- Vue中的slot(占坑,预留位置)
Vue中的slot(占坑,预留位置) 子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> ...
- vue中的slot理解和使用
最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力. 在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue基础系列(二)——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- 深入理解vue中的slot与slot-scope
from:https://segmentfault.com/a/1190000012996217?utm_source=tag-newest 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练 ...
- Vue中的slot内容分发
①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...
- Vue中的slot
个人理解:是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参: Slot的通俗理解 是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自 ...
随机推荐
- 【BZOJ3451】Normal
[BZOJ3451]Normal Description 某天WJMZBMR学习了一个神奇的算法:树的点分治! 这个算法的核心是这样的: 消耗时间=0 Solve(树 a) 消耗时间 += a 的 大 ...
- Mysql 关键字的优先级 分组 多表联查
查看模式 select @@global.sql_mode; 关键字的优先级 from 来自 where 条件 group by 分组 having 筛选 select 查询 distinct 去重 ...
- 8.03-json_to_csv
import json import csv # 需求 json 中的数据 转换 成 csv文件 # 1.分别 读 , 创建文件 json_fp = open('02new.json', 'r') c ...
- Gps定位和wifi定位和基站定位的比较
现在手机定位的方式是:Gps定位,wifi定位,基站定位 Gps定位的前提,手机开启Gps定位模块,在室外,定位的精度一般是几米的范围 wifi定位的前提,手机要开启wifi,连不连上wifi热点都可 ...
- Android中Bitmap对象和字节流之间的相互转换
android 将图片内容解析成字节数组,将字节数组转换为ImageView可调用的Bitmap对象,图片缩放,把字节数组保存为一个文件,把Bitmap转Byte import java.io.B ...
- [JXOI2018]排序问题
嘟嘟嘟 这是今天做的第二道九条可怜的题,现在对他的题的印象是:表面清真可做,实则毒瘤坑人. 首先要感谢吉司机,我期望学的特烂,好在样例直接告诉我们期望怎么求了. 令\(b_i\)表示第\(i\)个不同 ...
- nginx.exe启动错误:bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
启动nginx.ese之后 nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a soc ...
- tar只解压tar包中某个文件
如果tar包很大,而只想解压出其中某个文件.方法如下: 只想解压出Redis-1.972.tar 中的Changes文件,来查看有哪些更改. [root@uplooking]# tar -tf Re ...
- 重置 Mac 上的 NVRAM 或 PRAM
https://support.apple.com/zh-cn/HT204063 如果 Mac 出现了与 NVRAM 或 PRAM 中储存的设置有关的问题,那么进行重置可能会有帮助. NVRAM( ...
- Java使用Future设置方法超时
1.使用线程包 java.util.concurrent.Future 2.Future代表一个异步计算的结果. 它提供了方法来检查是否计算已经完成,还是正在计算而处于等待状态,并且也提供了获取计算结 ...