参考链接:
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. Directx11教程(47) alpha blend(4)-雾的实现

    原文:Directx11教程(47) alpha blend(4)-雾的实现      除了用来实现透明效果之外,我们还可以用alpha blend来实现雾(fog)的效果.通过逐渐清晰的雾气效果,可 ...

  2. bzoj2752 高速公路

      列式子: 如果把从i号收费站到i+1号收费站之间路段编号设为i. 假如查询l号收费站到r号收费站之间的期望值. $ Ans_{l,r} = \sum\limits_{i=l}^{r-1} v_i ...

  3. 部署zabbix3.2.7,升级到3.4、proxy部署

    一.Server安装 可以使用mysql.percona.mariadb等,本例使用mariadb.由于是事后整理,只截取部分命令. #yum install mariadb-server maria ...

  4. 【错误收集】SVN冲突解决 标签: 错误收集 2016-03-13 08:44 624人阅读 评论(24) 收藏

    最近在倒代码,这真的是一件挺低效率的事情的,但是为了之后工作的进行,必须把这些已经做好的界面,做好的功能搬到新的框架上来,所以安排了10来个同学一起倒代码,因为大家共用一个解决方案,所以使用svn来进 ...

  5. phpexcel使用说明5----ThinkPHP+PHPExcel[导入][导出]实现方法

    转自:http://www.thinkphp.cn/code/403.html实现步骤: 注意:phpexcel必须是1.78版本的,不能用1.8以上的 一:去官网http://phpexcel.co ...

  6. nodejs启本地服务器

    https.js var PORT = 8666;// var http = require('http'); var url=require('url'); var fs=require('fs') ...

  7. LeetCode75 Sort Colors

    题目: Given an array with n objects colored red, white or blue, sort them so that objects of the same ...

  8. 2019-2-24-VisualStudio-过滤输出窗口文本

    title author date CreateTime categories VisualStudio 过滤输出窗口文本 lindexi 2019-2-24 11:10:7 +0800 2019-0 ...

  9. saltStack_Pillar

    Pillar是Salt非常重要的一个组件,它用于给特定的minion定义任何你需要的数据,这些数据可以被Salt的其他组件使用.这里可以看出Pillar的一个特点,Pillar数据是与特定minion ...

  10. OpenStack☞网关协议

    一 动态页面与静态页面区别 静态页面:每一个网页都有一个固定的URL,且网页的URL以.html..htm..shtml等常见的形式为后缀. 网页内容已经发布到网站服务器上,无论是否有用户访问,每个静 ...