Vue的slot-scope的场景

Vue的插槽slot，分为3种

匿名插槽
具名插槽
作用域插槽
匿名插槽代码如下
1.父组件：

菜单1

2.子组件

这里是子组件

具名插槽 有name属性
子组件

父组件

作用域插槽 | 带数据的插槽 父组件对于这个数据可以多次使用，也可以赋予不同的样式 父组件

这里是父组件

{{item}}

</child>

<!--第二次使用：用列表展示数据-->
<child>
  <template slot-scope="user">
    <ul>
      <li v-for="item in user.data">{{item}}</li>
    </ul>
  </template>

</child>

<!--第三次使用：直接显示数据-->
<child>
  <template slot-scope="user">
   {{user.data}}
  </template>

</child>

<!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
  我就是模板
</child>

子组件

<h3>这里是子组件</h3>
// 作用域插槽
<slot  :data="data"></slot>

export default {
data: function(){
return {
data: [‘zhangsan’,‘lisi’,‘wanwu’,‘zhaoliu’,‘tianqi’,‘xiaoba’]
}
}
}