关于作用域插槽 slot-scope

solt，它是一个空壳子，因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板将来就显示在什么位置。

作用域插槽

在组件内 通过 slot-scope 取到 子组件 <solt :data=' '> data绑定的值
代码 示例 如下

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展示数据-->
    <child>
      <template slot-scope="childEmit">
        <div class="tmpl">
          <span v-for="item in childEmit.data" :key="childEmit.data.index">{{item}}</span>
        </div>
      </template>

    </child>

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

    </child>

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

    </child>

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

<template>
  <div class="child">

    <h3>这里是子组件</h3>
    <!-- // 作用域插槽 -->
    <slot :data="todo"></slot>
  </div>
</template>
 <script>
export default {
  name: "child",
  data() {
    return{
      todo: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
    };
  }
};
</script>

实现 效果 如下

test.png