使用插槽分发内容
在封装vue组件的时候，很多时候就不得不使用到vue的一个内置组件<slot>。slot是插槽的意思，顾名思义，这个<slot>组件的意义是预留一个区域，让其中的DOM结构可以由调用它的组件来渲染。
假设现在有一个people组件，结构如下：
<template>
<div>
<strong class="tip">*填写的内容必须真实</strong>
<label>姓名</label><input type="text" name="name">
<label>性别</label><input type="text" name="sex">
<button>确定</button>
</div>
</template>
当我们注册这个组件之后，就可以在其他组件中这样子使用
<template>
<div>
<h3>用户信息</h3>
<people>
</people>
</div>
</template>
我们都很清楚上面的代码最后渲染的样子。
<div>
<h3>用户信息</h3>
<div>
<strong class="tip">*填写的内容必须真实</strong>
<label>姓名</label><input type="text" name="name">
<label>性别</label><input type="text" name="sex">
<button>确定</button>
</div>
</div>
一般来说我们这样子封装<people>组件是没有问题的了。但是有时候我们在开发中，需要的组件还需要更抽象一点。我们试想以下，假设我们的<people>组件的功能是获取用户的信息，点击确定上传到服务器。如果是按照上面的方式封装这个<people>组件，那么我们每次调用这个组件就只能让用户输入姓名和性别。假设在另外的场景中，我们还需要用户输入多一项年龄信息，那我们的这个<people>组件就不能使用了，就还得需要另外一个一个组件。<people2>。而事实上这个<people2>的组件功能逻辑完全和<people>一样，只是多了一项年龄信息。在这种情况下，就相当于再写了一个重复的组件。那有没有办法可以让我们的<people>组件可以更通用点。这时候摆在我们面前的问题就是，能不能在调用<people>的时候，可以指定<people>组件应该怎么渲染?<slot>组件就是为了解决这种问题而存在的。
我们改变一下<people>的封装方式：
<template>
<div>
<strong class="tip">*填写的内容必须真实</strong>
<slot>如果调用我的组件没有传入内容，那么就渲染<slot>里面的内容。</slot>
</div>
</template>
我们在需要由父组件来渲染的部分使用<slot>插槽，相当于占位。这样我们就可以在调用的时候，再指定这个<people>组件里面有什么内容：
<template>
<div>
<h3>用户信息</h3>
<people>
<label>姓名</label><input type="text" name="name">
<label>性别</label><input type="text" name="sex">
<button>确定</button>
</people>
</div>
</template>
渲染之后是：
<div>
<h3>用户信息</h3>
<div>
<strong class="tip">*填写的内容必须真实</strong>
<label>姓名</label><input type="text" name="name">
<label>性别</label><input type="text" name="sex">
<button>确定</button>
</div>
</div>
这样子我们的<people>组件就更为通用了。并且当调用<people>的组件没有指定内容的时候，<peopel>组件里的<slot></slot>内容会渲染。如下图。这也是vue.js<slot>插槽最基本的用法。
匿名插槽和具名插槽
除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽（匿名插槽）时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。
可以通过为<slot>插槽指定name（具名插槽）来指定渲染一个组件中多个插槽中的某一个。
<div>
<slot name="slot1"></slot>
<slot name="slot2"></slot>
</div>
调用
<people>
<div slot="slot1">slot1的内容</div>
<div slot="slot2">slot2的内容</div>
</people>
渲染的结果：
<div>
<div >slot1的内容</div>
<div >slot2的内容</div>
</div>
作用域插槽
这种特殊的插槽可以暴露子组件中的内容,把数据交由父组件来渲染。看下面的例子：
子组件<child> 的模板
<template>
<div>
<slot tip='子组件内部的tip'></slot>
</div>
</template>
父组件中调用：
<div>
<child>
<template slot-scope='props'>
<!--在这里可以使用child组件暴露在slot中的数据-->
<p>{{props.tip}}</p>
</template>
</child>
</div>
渲染的结果为：
<div>
<div>
<p>子组件内部的tip</p>
</div>
</div>