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 ...
随机推荐
- Android开发 集成极光推送中的问题
AndroidManifest.xml清单文件报错: cn.jpush.android.service.DataProvider@exported value=(true)报错,解决如下: 根据报错行 ...
- Flutter环境搭建
本文介绍mac上搭建Flutter环境 1.Flutter官方提供中国地区镜像地址:https://github.com/flutter/flutter/wiki/Using-Flutter-in-C ...
- LeetCode 237. Delete Node in a Linked List 删除链表结点(只给定要删除的结点) C++/Java
Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...
- 使用shell命令给文件中每一行的前面、后面添加字符
shell command shell给一个文件中的每一行开头插入字符的方法:awk '{print "xxx"$0}' fileName shell给一个文件中的每一行结尾插入字 ...
- 转发自:一像素 十大经典排序算法(动图演示)原链接:https://www.cnblogs.com/onepixel/articles/7674659.html 个人收藏所用 侵删
原链接:https://www.cnblogs.com/onepixel/articles/7674659.html 个人收藏所用 侵删 0.算法概述 0.1 算法分类 十种常见排序算法可 ...
- Python爬虫与数据分析之爬虫技能:urlib库、xpath选择器、正则表达式
专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...
- AS3获得当前文件的文件名
//当前文件的完整路径var fileUrl:String = this.loaderInfo.url;//查找路径的最后一个"/"var flag:int = fileUrl.l ...
- mount.cifs permission denied
[root@dev ~]# mount.cifs //192.168.9.155/APP /mnt/APP/ -o user=administrator,pass=dsff#$TTT 在检查帐号密码权 ...
- Echart ,X轴显示的为tooltip内显示的一部分内容放在上面显示的一部分如下图所示
如图所示:X轴只显示tooltip部分内容解决方案 在xAxis下面,实现方法如下 axisLabel: { interval: 0, formatter:function(value) { var ...
- 二.第一个自动化demo,打开APP-如何获取包名和activity。(真机)
环境配置成功后,我们就可以进行第一个自动化测试了.用真机则不需要安装安卓模拟器.以一个简单的打开APP为例. 一.获取包名和activtity 启动一个app,我们需要知道它的平台.版本号. ...