关于vue.js中slot的理解

slot这块看官网文档，起初有点不懂，仔细研究还是最终理解了，slot是用来干嘛的呢，先看下一个例子：

直接运行会输出如下：

这里并没有显示children组件中的span内容，如果想显示span怎么办？那就是使用在组件模板中使用slot进行span内容的一个分发：

这回显示如下：

说明span的内容作为button的子标签已经显示ok，那么问题来了，如果我们有好几slot怎么办，父组件可能同时会在子组件中放置多个span标签，比如下面这种：

在子组件中需要选择性的显示第一个span还是第二个span，怎么办？直接这样试试：

以上写法肯定是错误的，这样写的话相当于没有区分两个span，这样在slot分发的时候会将两个span标签内容当做一个标签合并插入2处slot位置那里，正确的做法是为slot指定name属性：

以上才可正确输出如下：

对于以下情景我们再测试下：

1、子组件模板中指定name属性的slot不存在：

当在children内找不到匹配的slot时，相当于该slot无效，即以上两个span均不会显示：

2、子组件模板中指定name属性的slot存在，但是父组件注入的另一个slot没有使用的情况：

同样地，相当于该具名slot没有生命而已，即slot等于3的span不会显示：

以上我们共使用了两种slot，没有指定name属性的slot为“单个slot”，指定了name属性的slot称作为“具名slot”，具名slot会查找相应的slot属性相同的父组件内容进行匹配

slot的差不多就这么多吧，后续看到了再补充。。。