参考链接:
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. 【软件安装】python安装numpy、scipy

    python2.7开发环境,若为python3.4的环境则下载对应的软件 系统为64为windows环境,显然不同于32的环境,更繁琐,所谓的网友教程也不尽人意. 安装numpy 下载地址:http: ...

  2. .net WebServer示例及调用(接口WSDL动态调用 JAVA)

    新建.asmx页面 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  3. 学习python所需要了解的一些基础计算机知识汇总

    1)编程语言 语言是一个物体与另一个物体交流的介质,而编程语言就是程序员与计算机沟通的介质,人使用编程语言的目的就是控制计算机为人服务. 例如,用户使用用python语言编写的应用程序通过操作系统向C ...

  4. mysql锁机制之行锁(四)

    前言 顾名思义,行锁就是一锁锁一行或者多行记录,mysql的行锁是基于索引加载的,所以行锁是要加在索引响应的行上,即命中索引,如下图所示: InnoDB 支持多粒度锁(multiple granula ...

  5. bzoj1191 超级英雄

    Description 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确回 ...

  6. Cmake在编译osgEarth时遇到的一个错误

    CMake Error at src/osgEarthDrivers/CMakeLists.txt:7 (PROJECT): The CMAKE_C_COMPILER: llvm-gcc-4.2 is ...

  7. mysql 语句的查询过程解析

    select * from tb where ID = 1 下面解析的查询过程都是基于上面的简单查询,该系列的所有素材都来自于丁奇的mysql的45讲 1.建立连接 a.客户端发出请求,请求首先到达连 ...

  8. VSCode 设置 CPP 代码风格

    VSCode 设置 CPP 代码风格 按 Ctrl+, 打开设置,输入 format 找到. { BasedOnStyle: Google, IndentWidth: 4 }

  9. sum(),max(),avg(),RATIO_TO_REPORT()--分组统计

    select id,area, sum(1) over() as 总记录数, sum(1) over(partition by id) as 分组记录数, sum(score) over() as 总 ...

  10. Java练习 SDUT-1588_圆的面积

    圆的面积 Time Limit: 1000 ms Memory Limit: 32768 KiB Problem Description Give you the radius of a circle ...