作用域插槽slot-scope

slot-scope

在组件内 通过 slot-scope 取到 子组件 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>