Vue插槽slot

一、概念解析

插槽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>