具名插槽和作用域插槽一起使用

### Vue 组件中同时使用具名插槽和作用域插槽的方法

在 Vue.js 中，可以利用具名插槽 (named slots) 和作用域插槽 (scoped slots) 来增强组件的灵活性。当两者结合在一个组件内时，能够更精细地控制子组件内部结构的同时也赋予父级更多的定制能力。

#### 定义带有多重插槽类型的子组件

创建一个名为 `UserCard` 的子组件作为例子来展示如何实现这一点：

<template>
  <div class="user-card">
    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 具名插槽：头像部分 -->
    <div v-if="$slots.avatar" class="avatar-container">
      <slot name="avatar"></slot>
    </div>

    <!-- 带有数据传递的作用域插槽：用户详情 -->
    <div class="details-section">
      <slot :name="'details'" v-bind:user="userData">{{ userData.name }}</slot>
    </div>
    
    <!-- 可选的操作按钮区域通过具名插槽提供扩展 -->
    <footer v-if="$slots.actions" class="action-buttons">
      <slot name="actions"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: { id: 1, name: 'John Doe', age: 30 }
    };
  },
};
</script>

此模板定义了一个具有默认插槽、两个具名插槽 (`avatar`, `actions`) 和一个带有绑定对象 `user` 的作用域插槽 (`details`) 的组件[^1]。

#### 在父组件中应用上述子组件并填充相应内容

接下来，在调用这个 `UserCard` 子组件的地方，可以根据需求向其各个插槽注入特定的内容或逻辑处理函数：

<UserCard>
  <!-- 匿名/默认插槽 -->
  <p>这是一个简单的描述。</p>

  <!-- 使用具名插槽插入头像 -->
  <img src="/path/to/avatar.jpg" alt="Avatar Image" slot="avatar">

  <!-- 利用作用域插槽访问子组件的数据 -->
  <template #details="{ user }">
    <h2>{{ user.name }}的信息:</h2>
    <ul>
      <li>ID: {{ user.id }}</li>
      <li>年龄: {{ user.age }}</li>
    </ul>
  </template>

  <!-- 添加操作按钮到页脚 -->
  <button @click="editProfile()" slot="actions">编辑资料</button>
</UserCard>

这里展示了怎样分别针对不同类型的插槽设置具体的内容——无论是静态HTML还是基于JavaScript表达式的动态片段；同时也体现了如何借助作用域插槽接收来自子组件的状态信息以便进一步加工显示[^2]。