参考链接:
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. PHP来控制Linux,ssh2来控制服务器端

    注意:我们用PHP来控制Linux,php环境可以在windows也可以在linux,但是我们要控制的机器是一台linux(被控制的linux关闭selinux和firewalld). 如果php在l ...

  2. No PostCSS Config found解决办法

    npm install报错 Module build failed: Error: No PostCSS Config found 解决办法是同级package.json文件新建postcss.con ...

  3. Notepad++中Python脚本运行出现语法错误:IndentationError: unindent does not match any outer indentation level

    使用Notepad++编辑python代码运行遇到了这个问题: IndentationError: unindent does not match any outer indentation leve ...

  4. (五)IO流之ByteArrayInput/OutputStream

    ByteArrayInputStream:是把字节数组当成源的输入流 String string="hello shanghai"; ByteArrayInputStream bi ...

  5. toString和valueOf使得对象访问时显示一个特定格式的字符串,但是可以进行数字运算

    作用 toString()的作用是返回一个反映这个对象的字符串; valueOf()的作用是返回它相应的原始值; 异同点 共同点:在 JavaScript 中,toString()方法和valueOf ...

  6. 利用微信提高APP下载的3个推广方式!

    http://www.cocoachina.com/market/20150615/12149.html 走进移动互联网时代,各式各样App层出不穷,开发者们已经早一步走在了我们前面,为我们想到了一切 ...

  7. phpexecl

    <?phpnamespace Admin\Controller;use Think\Controller;class InoutController extends Controller { p ...

  8. bert 硬件要求

    https://github.com/google-research/bert BERT ***** New May 31st, 2019: Whole Word Masking Models *** ...

  9. @游记@ CQOI2019(十二省联考)

    目录 @day - 0@ @day - 1@ @day - 2@ @后记@ 我只是来打酱油哒-- 顶多能进个 E 类继续打酱油. 原本还在互奶 A 队,结果现在--铁定进不了队啦. 对初中生的歧视啊 ...

  10. 禁用gpu首选

    import osos.environ["CUDA_DEVICE_ORDER"] = "PCI_BUS_ID"os.environ["CUDA_VIS ...