vue 插槽

单个插槽| 默认插槽| 匿名插槽

特点：一个组件中只能有一个这样的插槽
没有槽属性的HTML模板默认关联匿名插槽。

具名插槽

子组件:

<div>
    <div>这是子组件</div>
    <slot name="content"><slot>
</div>

父组件:

<div>
  <div>这是父组件</div>
  <child>
    <template slot="content">插槽内容</template>
  </child>
</div>

显示结果:

这是父组件
这是子组件
插槽内容  ---------------是名字为content的插槽里面的内容，如果没有slot,123不展示，

注意：
父组件使用子组件的插槽，使用什么样的标签不重要，可以用template，可以用div ,可以用span

作用域插槽| 带数据的插槽

样式父组件说了算，但内容可以显示子组件插槽绑定的。可在父组件复用
作用域插槽可以不起名，最好起名

传多个参数

子组件

<slot name="user" :data="data"></slot>

父组件

<child>
   <template slot-scope="user">
       <ul>
          <li v-for="item in user.data">{{item}}</li>
       </ul>
   </template>
</child>
// user.data  user是插槽明，data是绑定值

三种插槽的对别

匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
带数据的插槽
<slot name="user" :data="data"></slot>

slot和slot-scope的区别

slot 后面跟组件的名字
slot-scope 后面跟组件传过来的数据，是形参scope

在子组件中的插槽上有一句data="list"，而在父组件中也有slot-scope="scope"，slot-scope就是取data的值，slot-scope的值是自定义的，我们可以取任何名称，但是data的值传过来时是以对象形式传输的，所以在这scope.data才是list的值。

后面在实际使用时，发现版本的不同，会导致某些语法不可以使用。所以如果本篇文档中的方法不可用，可换用网络上其他方法。