今天我们继续来说说 Vue，目前一直在自学 Vue 然后也开始做一个项目实战，我一直认为在实战中去发现问题然后解决问题的学习方式是最好的，所以我在学习一些 Vue 的理论之后，就开始自己利用业余时间做了一个项目，然后通过项目中的一些案例进行总结。
今天我们来说说 Vue 中的内容分发 <slot>，首先 Vue 实现了一套内容分发的 API，这套 API 是基于当前的 Web Components 规范草案，将 <slot> 元素作为承载内分发内容的出口，内容分发是 Vue 中一个非常重要的功能，很多第三方的框架库都使用到了
<slot> 功能，所以掌握这个技能是非常重要的。
它可以让我们更加优雅的使用组件。
我对 <slot> 的理解有三点或者说优势，当然，这个只是我个人的理解，如果你有不同理解的地方，欢迎交流讨论，这样才能碰出不一样的花火。
回到主题，我对内容分发的三点理解：
可以优雅的包装原生的 HTML 标签
组件标签可以嵌套，就像使用原生 HTML 标签一样
让组件更加的通用和可复用
如果没有 <slot> 元素，当我们在组件的标签中使用组件标签或者组件标签中使用 HTML 原生标签，都是没有任何作用的，这个和我们以往使用和认识的 HTML 是相违背的。
下面我们就对这三点去做一个详细的阐述，先从一个张图开始。
这个大家都见过，一个标准的 dialog 对话框，项目中也经常使用到，我们把它抽出来做成一个组件如下：
<div class="dialog-panel"><div class="dialog-header">
<h3 class="title">标题</h3>
<button class="close">x</button>
</div>
<div class="dialog-content">这是一个标准的 dialog 对话框</div>
<div class="dialog-footer">
<el-button type="primary" plain>取消</el-button>
<el-button type="primary">确定</el-button>
</div>
</div>
首先这个组件不够灵活，内容基本上是写死的，就拿标题来说，我们希望标题是可以变化的，让使用者可以传递标题进来，那么我们该如何去设计我们的这个组件呢？这就是我们今天要说的内容分发 <slot>了，我们小小的修改下我们的例子。
<div class="dialog-panel"><slot></slot>
<div class="dialog-content">这是一个标准的 dialog 对话框</div>
<div class="dialog-footer">
<el-button type="primary" plain>取消</el-button>
<el-button type="primary">确定</el-button>
</div>
</div>
在父组件中使用它
<dialog-panel><div class="dialog-header">
<h3 class="title">传递进来的标题</h3>
<button class="close">x</button>
</div>
</dialog-panel>
你会发现组件渲染之后，<slot> 元素会被替换成组件中包裹的元素，标题的内容完全由外部传递进来。
上面我们只是嵌套了一个简单的 div 标签元素，插槽可以传入任何的元素，不管是HTML，还是组件元素。
插槽的默认内容