一、概念解析
插槽slot：插槽有点像组件中的一个占位符，当别的组件使用这个组件的时候，在这一对标签中又写了其他内容，就通过插槽渲染进这个组件
具名slot：用属性name标识的插槽，可以根据不同的名字匹配分发内容
作用域slot：用于接收子组件传递过来的数据。通常父组件在分发内容时，引用的是自己组件的数据。如果想要使用子组件的数据，就通过作用域插槽。
二、例子
1. 单个插槽
step1. 子组件内部定义slot标签占位
step2. 父组件使用子组件时分发内容，渲染到slot
<div class="myComponent"> //假定组件my-component有如下模板
<slot></slot>
</div>
//在父组件中的使用方法
<my-component>
<p>我就是slot的替代内容，这里可以放任何标签元素，即使是一长串ul>li列表</p>
</my-component>
2. 具名插槽
step1. 子组件内部定义slot标签占位，并且给不同的slot，命名
step2. 父组件使用子组件时分发内容，在分发内容处指明要渲染的slot的名字
//假定组件my-component有如下模板
<div class="myComponent">
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
//在父组件的模板中使用方法
<my-component>
<p slot="header">我就是这个叫header的slot替代内容，这里可以放任何标签，只要标签加了slot="header"就会渲染</p>
<span slot="footer">我就是这个叫footer的slot替代内容</span>
</my-component>
3. 作用域插槽
step1. 子组件内部定义slot标签占位，在slot标签里自定义属性传值
step2. 父组件分发内容时定义slot-scope属性，它的值是临时变量，通过这个临时变量引用子组件slot的传值属性
//假设子组件的模板有如下内容
<div class="child">
<slot text = "hello world"></slot>
</div>
//父组件在模板中使用子组件的text的值
```html
<div class="parent">
<child>
<span slot-scope="props"> {{props.text}} </span> //会把hello world渲染出来
</child>
</div>
