vue - 作用域插槽

作用域插槽：可从子组件获取数据的可复用的插槽
作用域是子组件本身绑定的数据
场景：典型代表性 - 列表组件 【child 组件做列表的循环（ul），列表中的每一项如何显示并不关心，显示由外部决定，外部组件调用chlid，需要向子组件传递slot(li)，告知子组件如何显示列表的每一项】【既可以复用子组件的slot，又可以使slot内容不一致】

  // child.vue
  <template>
    <!-- <div v-for="user in users"> ... </div> -->
    <ul>
       <slot v-for="user in users" :user="user" name="user"></slot>
    </ul>
  </template>
  <script>
    export default {
      props: {
        users: { // 也可内部data自定义
            type: Array,
             default () { return []}
        }
      }
    }
  </script>

  // father.vue
  <template>
      <child :users="users">
        <template slot="user" slot-scopr="slotProps">
          <li>name: {{ slotProps.user.name }} & age: {{ slotProps.user.age}}</li>
        </template>
      </child>
  </template>
  <script>
    export default {
      data() {
        return {
            users: [ {name: 'tom', age: '20'}]
      }
    }
  </script>