如何在插槽中显示组件中的数据？

在Vue.js中，插槽（Slots）是一种分发内容的机制，允许你在组件内部预留一个或多个位置，然后在父组件中填充这些位置的内容。如果你想在插槽中显示组件内部的数据，可以通过作用域插槽（Scoped Slots）来实现。

基础概念

作用域插槽允许组件将数据传递到插槽内容中，使得父组件可以访问这些数据并在插槽内部使用它们。

类型

默认插槽：最简单的插槽类型，不传递任何数据。
具名插槽：通过名称来区分多个插槽。
作用域插槽：允许组件向插槽传递数据。

应用场景

列表渲染：如表格、列表等组件，可以使用作用域插槽自定义每一项的渲染方式。
布局组件：如卡片、模态框等，允许外部定义内部的具体内容。

示例代码

假设我们有一个UserList组件，它接收一个用户数组，并通过作用域插槽将每个用户的数据传递给父组件进行渲染。

UserList.vue

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        <!-- 使用作用域插槽传递用户数据 -->
        <slot :user="user"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    users: Array
  }
}
</script>

在父组件中，我们可以这样使用UserList组件，并在插槽中访问每个用户的数据：

ParentComponent.vue

<template>
  <UserList :users="users">
    <!-- 使用作用域插槽 -->
    <template v-slot:default="slotProps">
      <div>{{ slotProps.user.name }} - {{ slotProps.user.email }}</div>
    </template>
  </UserList>
</template>

<script>
import UserList from './UserList.vue';

export default {
  components: {
    UserList
  },
  data() {
    return {
      users: [
        { id: 1, name: 'Alice', email: 'alice@example.com' },
        { id: 2, name: 'Bob', email: 'bob@example.com' }
      ]
    };
  }
}
</script>