slot详解

前言：插槽（slot）与组件

在平时开发中重复出现的功能模块往往采用封装组件的形式处理，一个组件封装的是否成熟那最侧重的就是这个组件的复用性，不然这个组件封装的就毫无意义。那么插槽其实就可以从一定程度上来提升一个组件的复用性。
Vue文档里也对slot进行的详解，简单的就可以理解为：插槽（slot），是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样显示。

从模块化的角度去理解一个组件，那么可以理解成一个非slot组件和slot组件

非slot组件：由常规的控件标组成，DOM的显隐由自身控制

slot组件：在子组件里他其实就是一个空壳，但是他决定了要插入的内容的位置与样式，父组件则决定了插槽里的内容。

例如：

渲染如下：

上述示例中是 Vue官方的单个插槽，也叫默认插槽（匿名插槽），因为他不需要你去设置slot的name属性，默认为slot：default。每个组件里只允许出现一个默认插槽

与之相对的就是具名插槽，具名插槽则需要父组件中设置slot的name属性才能关联子组件的插槽，组件里允许出现多个具名插槽

例如：

作用域插槽（带参插槽）

在上述插槽类型中（非带参插槽）父级组件决定了插槽是不是空壳，决定了插槽里的内容，父组件既要提供样式也要提供Content;而作用域插槽（带参插槽）只需要父组件提供一套样式就可以了。

如下：

后续补充v-slot 2.6版本的规范用法