slot的使用方法
参考链接:
https://www.cnblogs.com/loveyt/p/9946450.html
插槽的使用其实是很简单,你只需明白以下两点,就很容易理解。
1.插槽是使用在子组件中的,
2.插槽的作用是将父组件中的子组件模板数据正常显示
默认插槽
我现在创建一个demo,结构如下:
父组件代码如下:

输出结果

当然在父组件引用的子组件中也可以写入其他组件


具名插槽
在子组件中定义了三个slot标签,其中有两个分别添加了name属性header和footer

在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置(当然也不用必须写到template),没有对应值的其他内容会被放到子组件中没有添加name属性的slot中

从上面可以看出来:父组件最终打印的结果并不是根据自身代码书写的顺序展现出来的,而是根据
插槽的默认内容
可以在子组件的slot标签中写入内容,当父组件没有写入内容时会显示子组件的默认内容,当父组件写入内容时,会替换子组件的默认内容

编译作用域


作用域插槽
在子组件的slot标签上绑定需要的值,在父组件上使用slot-scope属性,user.data就是子组件传过来的值


slot的使用方法的更多相关文章
- Object::connect: No such slot xxx 解决方法
在所有代码和槽函数全部写好之后,进行编译时竟然报 No such slot xxxx,奇怪 Starting E:\01_project\03_C++\key\debug\key.exe... Obj ...
- 另外一种获取redis cluster主从关系和slot分布的方法
条条大路通罗马,通过最近学习redis cluster 观察其输出,发现了另外一种获取master-slave关系的方法. [redis@lxd-vm1 ~]$ cat get_master_slav ...
- 插槽slot
主要是让组件的可扩展性更强.1.匿名slot使用 //定义组件my-component <div class="myComponent"> <slot>&l ...
- Coroutine in Java - Quasar Fiber实现--转载
转自 https://segmentfault.com/a/1190000006079389?from=groupmessage&isappinstalled=0 简介 说到协程(Corout ...
- redis 集群配置实战
文章转载自:http://hot66hot.iteye.com/blog/2050676 最近研究Redis-cluster,正好搭建了一个环境,遇到了很多坑,系统的总结下,等到redis3 rele ...
- redis 3.0的集群部署
转载请注明出处:http://hot66hot.iteye.com/admin/blogs/2050676 最近研究redis-cluster,正好搭建了一个环境,遇到了很多坑,系统的总结下,等到re ...
- (10) 深入了解Java Class文件格式(九)
转载:http://blog.csdn.net/zhangjg_blog/article/details/22432599 经过前八篇关于class文件的博客, 关于class文件格式的内容也基本上讲 ...
- (转)redis 3.0的集群部署
一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis3.0中推出,可以看作者antirez的声明:http://antirez.com/ ...
- [转]redis-cluster研究和使用--待研究
转自:http://hot66hot.iteye.com/blog/2050676 一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis ...
随机推荐
- SPSS分析技术:二阶聚类分析;为什么出现大学生“裸贷”业务,因为放贷者知道贷款者还不起
SPSS分析技术:二阶聚类分析:为什么出现大学生"裸贷"业务,因为放贷者知道贷款者还不起 今天将介绍一种智能聚类法,二阶聚类法,在开始介绍之前,先解答很多人在后台提出的一个疑问:那 ...
- php Laravel Thrift使用TMultiplexedProcessor复用端口模式
thrift的使用中一般是一个Server对应一个Processor和一个Transport,如果有多个服务的话,那必须要启动多个Server,占用多个端口,这种方式显然不是我们想要的,所以thrif ...
- 洛谷 P3958 奶酪 并查集
目录 题面 题目链接 题面 题目描述 输入输出格式 输入格式 输出格式: 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P3958 奶酪 题面 题目描述 现有一块大奶酪 ...
- 模拟登录新浪微博(Python) - 转
Update: 如果只是写个小爬虫,访问需要登录的页面,采用填入cookie 的方法吧,简单粗暴有效,详细见:http://www.douban.com/note/264976536/模拟登陆有时需要 ...
- C++模板编译模型
一:传统的编译模型 使用C/C++进行编程时,一般会使用头文件以使定义和声明分离,并使得程序以模块方式组织.将函数声明.类的定义放在头文件中,而将函数实现以及类成员函数的定义放在独立的文件中. 但是对 ...
- 巨蟒python全栈开发-第11阶段 ansible3_2入门八个模块
大纲: 1.file模块 2.fetch模块 3.yum&&pip模块 4.service模块 5.cron模块 6.user模块 7.group模块
- Git 的两种忽略文件方式 gitignore 和 exclude
Git 的两种忽略文件方式 gitignore 和 exclude .gitignore 不用说了,大家都知道. 有一个 exclude 可能接触比较少. 知道这个功能后发现,用在服务器上非常方便,因 ...
- 在SAE上使用Flask插件
因为我之前学习的时候使用的是虚拟环境,下载的所有需要用到的插件都在flask这个文件夹里面,SAE上Flask的版本和我本地用的版本对不上,导致有时候import都不对,于是我就把本地的环境直接放到S ...
- LeetCode54 Spiral Matrix
题目: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spira ...
- zip解决杨辉三角问题
杨辉三角原型: / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ 实现: a = [1] while True: print(a) ...
