slot-scope
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示。
由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类。
非插槽模板指的是html模板,比如‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制;
插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定,slot写在组件template的什么位置,父组件传过来的模板将来就显示在什么位置。
单个插槽 | 默认插槽 | 匿名插槽
首先是单个插槽,单个插槽是vue的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置name属性。
单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一个组件中只能有一个该类插槽。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了
关于slot-scope的一篇文章,原文地址 https://blog.csdn.net/qq_28929589/article/details/82896364
另一篇不错的文章: https://www.jb51.net/article/133733.htm
slot-scope的更多相关文章
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
Components with slots can expose their data by passing it into the slot and exposing the data using ...
- emitted value instead of an instance of error the scope attribute for scoped slots webpack babel polyfill
api20180803.vue emitted value instead of an instance of error the scope attribute for scoped slots h ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- vue 表格树 固定表头
参考网上黄龙的表格树进行完善,并添加固定表头等的功能,目前是在iview的项目中实现,如果想在element中实现的话修改对应的元素标签及相关写法即可. <!-- @events @on-row ...
- vue学习:props,scope,slot,ref,is,slot,sync等知识点
1.ref :为子组件指定一个索引 ID,给元素或者组件注册引用信息.refs是一个对象,包含所有的ref组件. <div id="parent"> <user- ...
- Vue内容分发slot
前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 “transclusion” ).Vue实现了一个内容分发 API,参照了当前 Web ...
- 理解vue中的scope的使用
理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...
- vue组件详解(四)——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- slot
本文涉及的slot有:<slot>,v-slot吗,vm.$slots,vm.$scopedSlots 废弃的使用特性:slot,slot-scope,scope(使用v-slot,2.6 ...
- Slot使用
1.组件中有单个或多个未命名slot标签时,如下:<Child><span style=”color:red;”>hello world</span></Ch ...
随机推荐
- Angular CLI: 全局脚本
全局脚本 有的时候,我们需要加载全局脚本,例如 jQuery 脚本库,第三方的控件库等等.比如 jQuery 可以直接加载到 window 对象上,这就需要我们使用 Angular 中的全局脚本来处理 ...
- mybatis入门篇:Mybatis注解方式的基本用法
@Select 1.mybatis-config.xml <?xml version="1.0" encoding="UTF-8" ?> <! ...
- java-网络通信-索引
HTTP协议 关于HTTP协议,一篇就够了 HTTP与HTTPS的区别 HTTP Keep-Alive模式 HTTP长连接和短连接 HTTP的长连接(持久连接)和短连接 HTTP的长连接 ...
- 三、Python-列表
一.序列:是一块用于存放多个值的连续内存空间,并且按一定顺序排列,可以通过索引取值 索引:从左到右的索引从0开始依次增加的正整数:从右到左的索引为-1开始的复数 切片(分片):一中获取序列中的元素的方 ...
- spring boot 集成disconf
1.spring boot配置disconf需要在启动类上配置读取xml的入口注解:@ImportResource({"classpath:spring-disconf.xml"} ...
- Python中的split()函数的用法
函数:split() Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(lis ...
- python yield 与 yield from转
python yield 与 yield from转 https://blog.csdn.net/chenbin520/article/details/78111399?locationNum=7&a ...
- 啊哈算法第四章第三节 层层递进-广度优先搜索 java实现
package corejava; public class FourThree { static int [][]a=new int[50][50]; static int [][]b=new in ...
- [TensorFlow]TensorFlow安装方法
下载*.whl文件方法安装: 方法:http://www.python36.com/install-tensorflow-using-official-pip-pacakage/ 在线安装: 方法:h ...
- 2018-2019-2 网络对抗技术 20165304 Exp1 PC平台逆向破解(BOF实验)
1.实践目的 本次实践的对象是一个名为pwn1的linux可执行文件. 三个实践内容如下: 手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 利用foo函数的Bof漏洞,构造一个 ...