最近在开发一个活动页面，发现有很多的弹框要写，然后就把弹框封装成了组件，后来发现还是有很多样式代码是重复的，正好学习了vue的插槽，想想可以试着用用看，毕竟用了才能够加深理解。
先来看一个栗子：
大家应该都写过点击页面的某一处，弹出一个弹框，弹框是一个上下左右居中的div框，然后还会带有阴影蒙层。 弹框的内容是多种多样的，但是蒙层的形式可是雷打不动的。
我们可能会给每一个div框都写一个蒙层，那么这个时候就会有很多重复的样式出现，类似于这样：
.pop-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items: center;
.pop-container {
position: absolute;
background-color: #fff;
width: 80%;
}
}
}
写第二个框的时候也许我们还会再写一遍下面的样式
.pop-mask2 {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items: center;
}
有重复的地方就应该有优化，这个时候，我们可以将这个蒙层封装成一个蒙层组件
mask组件
html:
<div class="pop-mask">
<slot></slot>//这里加上插槽
</div>
css:
.pop-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items: center;
}
使用：
引入mask组件之后，在使用的地方加上你的弹框内容：
<mask>
<div>这里是弹框内容哦<div>//这里你可以添加普通元素 或者组件都可以
</mask>
最后，页面渲染成功之后所呈现的就是：
<div class="pop-mask">
<div>这里是弹框内容哦</div>
</div>
以上就是插槽的最基本的用法，也就是说在组件之间写的内容会帮你插入到组件的模板结构中去。
再来看另外一个栗子
还是以上面的弹框为例，可能这个弹框里面的内容也是由多个组件组成的，比如说，由一个head组件和foot组件组成，那么我们就要向这个mask组件中添加多个插槽了，那就可以这样写
mask组件改进：
html:
<div class="pop-mask">
<slot name="foot"></slot>//name为footd的插槽
<div>这里是多个插槽</div>
<slot name="head"></slot>
</div>
使用：
<mask>
<head slot="head"></head>
<foot slot="foot"></foot>
</mask>
最后渲染成功之后就是：
<div class="pop-mask">
<div class="foot"></div>
<div>这里是多个插槽</div>
<div class="head"></div>
</div>
这个就是具名插槽，就是给插槽指定特定的名字，然后再使用的组件上加上slot名字，那么名字相对应的模块就会被
插入到相应的slot中
以上，如果你在使用的时候，没有给name="foot"的内容，那么就只会渲染出name="head"的内容，
<slot name="foot"></slot>就不会渲染了
作用域插槽 我还没有很理解，今天就不说了，下次再补充。
欢迎大家指正！
