1.slot的用法

1.1 简单概念

元素作为组件模板之中的内容分发插槽，<slot> 元素自身将被替换

是不是这段话听着有点迷?

那么直接开始上代码

此时创建一个简单的页面，在中间写上一个<slot></slot>标签，标签内并没有数据

这时在另一个页面直接去调用它，那么现在main的class中当然是没有数据的

这时更改一下代码,为调用中加上一个"aaaaaa"

此时再看结果，就能发现数据已经有了，这就说明<slot>也是一个用来传数据的标签

根据以上特性，就可以对它进行其他的操作

循环一句话，指定20遍，会有什么结果呢？

可以看出，这句话被循环了20遍，并且它的高度会随着话的长度进行变化

1.2 slot对css进行改变

slot不仅可以将值传递，并且可以将标签的css样式一并传递

这样就可以实现以下操作

这时候建立了一个box1和box2盒子

让我们看看效果是怎么样的

可以看出，在对demo2中的样式进行改变之后，在页面中也进行了改变

也就是说<slot>这个标签不仅可以对值进行传递，对css样式也可以传递

1.3 具名插槽

在之前都只对一个slot进行传递，如果此时有两个slot都需要传递，那么这时又会怎么样呢？

此时页面中的已经乱套，特别是下面的粉方块，已经两块重叠在一起了，这样是有问题的

所以此时需要一个新东西 （具名插槽）

使用方法也是非常简单，只需要在需要具名的地方加上name属性即可

但是由于添加了具体名称，但是调用时并未声明哪一个名字，那么这样就会不显示任何数据

使用<template></template>标签，并且在里面写上v-slot:"名称" 这个属性

这样就可以传递到指定的名字中

这样的话，“首页头部” 就被传递过来了

需要传递两个值时，依然是同样的操作

这样就看到，box1和box2都被传递过来了，并且都存在不同的地方

1.4 具名插槽的简写

每次都要写v-slot属性比较繁琐，所以可以使用简写

此时直接用一个 “#”代替，那么结果也是一样的

可以看出与之前的没有任何变化，所以这种方式同样是可以使用的

那么这就是对于slot的一个简单概述及用法