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 ...
随机推荐
- GNU C和C99标准中的可变参数宏(variadic macros)
用可变参数宏(variadic macros)传递可变参数表你可能很熟悉在函数中使用可变参数表,如: void printf(const char* format, …); 直到最近,可变参数表还是只 ...
- 8. springboot logback 日志整合
在resources目录下,新建log/logback-spring.xml文件,内容如下: <?xml version="1.0" encoding="UTF-8 ...
- django 创建视图和APP
.创建视图views 1.在项目目录下创建views.py文件 2.from django.http import HttpResponse 3.在urls 导入模板: from django.con ...
- Echarts修改提示框及自定义提示框内容
1:首先先定义自定义的json数据 var msg = [{ 'tell':'110', 'ContentMessage':"我今天去吃大餐" },{ 'tell':'111', ...
- 居中分栏flex完美的解决方案
盒模型实现多栏布局 div { border: 1px solid #aaf; /* 设置HTML组件的大小包括边框 */ box-sizing: border-box; padding: 5px; ...
- 今日、本周、本月时间列表 python方法
def get_time(self): ''' @author : Cong @Email : 624420781@qq.com @描 述 : 生产时间列表 ''' # 生成本日时间列表 i = da ...
- java线程池的实现机制
原文链接:http://www.studyshare.cn/blog-front/blog/details/1133 一.java中提供的线程在开发中可能并不会直接使用,多线程编程场景使用java的线 ...
- 使用pip安装包提示TLS证书错误解决办法
最近有在使用pip安装python包的时候,总会出现以下类似的错误: Could not fetch URL https://pypi.python.org/simple/pytest-xdist/: ...
- 问题:页面输出正常,php写入sqlserver乱码/空白。
问题一:php连接sqlsever2005,输入中文,然后查询sqlserver中对应的数据,由于提交中文是UTF-8,而sqlserver的中文为GBK,所以字段无法匹配,没有查询结果. 问题二,p ...
- 吴裕雄 python 机器学习——分类决策树模型
import numpy as np import matplotlib.pyplot as plt from sklearn import datasets from sklearn.model_s ...