vue 作用域插槽

子组件

<template>
  <div class="user-box">
    <slot :user="user">
      <!-- 后备内容 -->
      {{user.firstName}}
    </slot>
  </div>
</template>

<script>
  export default {
    name: 'User',
    data() {
      return {
        user: {
          firstName: '张',
          lastName: '三'
        }
      }
    }
  }
</script>

父组件

 <User v-slot:default="slotProps">
    <!-- 插槽内容 -->
    <ul class="list">
        <li v-for="(key, value) in slotProps.user">{{key}} -- {{value}}</li>
    </ul>
    <!-- or -->
    <div class="list">
        <span v-for="(key, value) in slotProps.user">{{key}} -- {{value}}</span>
    </div>
</User>

渲染的dom结构由父组件决定，渲染的数据由子组件提供