2019-8-25 seo达人
今天在做vue项目的时候，遇到一个问题就是slot插槽的概念。这突然让我想起用过类似于element-ui前端框架时，用他们组件的时候接触过slot，如下图：
这是element-ui对话框的api，当时我记得我百度过，就是这样写就ok了，当时也没深究。
<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<span slot="title">
我是对话框标题
</span>
<!-- 这边写对话框的内容 -->
<span>我是对话框内容</span>
<span slot="footer" class="dialog-footer">
我是对话框footer
</span>
</el-dialog>
效果是这样：
今天研究了，我就查看了源码：
百度的发现这边有两个概念：
1.单个插槽也叫匿名插槽
slot不带name，如下：
<slot></slot>
一个子组件只有一个匿名插槽，就好比对话框的内容没有被含有slot="xx"属性的标签包裹，那么就会替换掉匿名插槽
2.具名插槽
slot 有name，如下
<slot name='xx'></slot>
具名插槽就可以有多个，就好比对话框含有slot='header'属性的标签会替换掉子组件<slot name='header'></slot>