参考链接:
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的使用方法的更多相关文章

  1. Object::connect: No such slot xxx 解决方法

    在所有代码和槽函数全部写好之后,进行编译时竟然报 No such slot xxxx,奇怪 Starting E:\01_project\03_C++\key\debug\key.exe... Obj ...

  2. 另外一种获取redis cluster主从关系和slot分布的方法

    条条大路通罗马,通过最近学习redis cluster 观察其输出,发现了另外一种获取master-slave关系的方法. [redis@lxd-vm1 ~]$ cat get_master_slav ...

  3. 插槽slot

    主要是让组件的可扩展性更强.1.匿名slot使用 //定义组件my-component <div class="myComponent"> <slot>&l ...

  4. Coroutine in Java - Quasar Fiber实现--转载

    转自 https://segmentfault.com/a/1190000006079389?from=groupmessage&isappinstalled=0 简介 说到协程(Corout ...

  5. redis 集群配置实战

    文章转载自:http://hot66hot.iteye.com/blog/2050676 最近研究Redis-cluster,正好搭建了一个环境,遇到了很多坑,系统的总结下,等到redis3 rele ...

  6. redis 3.0的集群部署

    转载请注明出处:http://hot66hot.iteye.com/admin/blogs/2050676 最近研究redis-cluster,正好搭建了一个环境,遇到了很多坑,系统的总结下,等到re ...

  7. (10) 深入了解Java Class文件格式(九)

    转载:http://blog.csdn.net/zhangjg_blog/article/details/22432599 经过前八篇关于class文件的博客, 关于class文件格式的内容也基本上讲 ...

  8. (转)redis 3.0的集群部署

    一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis3.0中推出,可以看作者antirez的声明:http://antirez.com/ ...

  9. [转]redis-cluster研究和使用--待研究

    转自:http://hot66hot.iteye.com/blog/2050676 一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis ...

随机推荐

  1. 【转】MySQL的btree索引和hash索引的区别

    Hash 索引结构的特殊性,其检索效率非常高,索引的检索可以一次定位,不像B-Tree 索引需要从根节点到枝节点,最后才能访问到页节点这样多次的IO访问,所以 Hash 索引的查询效率要远高于 B-T ...

  2. 【JZOJ4925】【GDOI2017模拟12.18】稻草人

    题目描述 YLOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,YLOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要满足以下条 ...

  3. 用五种不同的布局方式实现“左右300px中间自适应”的效果

    float浮动 <section class="layout float"> <style media="screen"> .layou ...

  4. 简单利用XSS获取Cookie信息实例演示

    简单利用XSS获取Cookie信息实例演示   首先要找到一个有XXS的站,这里就不整什么大站了,谷歌一下inurl:'Product.asp?BigClassName',搜出来的命中率也比较高.随便 ...

  5. lower_bounder()和upper_bound()的函数

    lower_bound() .upper_bound()都运用于有序区间的二分查找. ForwardIter lower_bound(ForwardIter first, ForwardIter la ...

  6. javascript —— 禁止通过 Enter 键提交表单

    $('btn').on('keydown', function () { return false; })

  7. P2532 [AHOI2012]树屋阶梯

    题目:P2532 [AHOI2012]树屋阶梯 思路: 打表之后不难看出是裸的Catalan数.简单证明一下: 对于任意一种合法方案,都可以表示为在左下角先放一个\(k*(n+1-k),k\in[1, ...

  8. Java练习 SDUT-1211_英文金曲大赛

    英文金曲大赛 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 我们在"渊子数"的题目中已经了解了渊子 ...

  9. qt 利用Qtimer 定时器实现定时消息发送

    为了实现给控制器按周期发送控制指令,利用qt中的Qtimer 实现消息的定时发送. 需要进行三步处理: 1.在mainwindow.h文件中对timerEvent进行声明 public virtual ...

  10. 选用适合的ORACLE优化器

    ORACLE的优化器共有3种: a.  RULE (基于规则)   b. COST (基于成本)  c. CHOOSE (选择性) 设置缺省的优化器,可以通过对init.ora文件中OPTIMIZER ...