Vue 的 Slot 用法详解

Vue.js 是一个渐进式 JavaScript 框架，它提供了丰富的功能来构建用户界面。其中，Slot（插槽）是 Vue 组件系统中的一个重要特性，它允许我们在组件中定义可替换的内容区域，从而实现更灵活的组件组合和内容分发。本文将详细介绍 Vue 的 Slot 用法，并提供示例代码帮助你更好地理解和应用它们。

1. 基本 Slot

基本 Slot 允许我们在组件中定义一个默认的内容区域，父组件可以传递内容来替换这个默认区域。

示例代码

<!-- ChildComponent.vue -->
<template>
  <div class="child">
    <slot>Default Content</slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div class="parent">
    <ChildComponent>
      Custom Content
    </ChildComponent>
  </div>
</template>

在这个示例中，ChildComponent 组件中定义了一个默认的 Slot，内容为 "Default Content"。在 ParentComponent 中使用 ChildComponent 时，传递了 "Custom Content" 来替换默认内容。

2. 具名 Slot

具名 Slot 允许我们在组件中定义多个不同的内容区域，并通过名称来区分它们。父组件可以通过名称来传递内容到指定的 Slot。

示例代码

<!-- ChildComponent.vue -->
<template>
  <div class="child">
    <header>
      <slot name="header">Default Header</slot>
    </header>
    <main>
      <slot>Default Main</slot>
    </main>
    <footer>
      <slot name="footer">Default Footer</slot>
    </footer>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div class="parent">
    <ChildComponent>
      <template #header>
        Custom Header
      </template>
      Custom Main
      <template #footer>
        Custom Footer
      </template>
    </ChildComponent>
  </div>
</template>

在这个示例中，ChildComponent 组件中定义了三个具名 Slot：header、默认 Slot 和 footer。在 ParentComponent 中使用 ChildComponent 时，通过 template 标签和 # 符号来传递内容到指定的 Slot。

3. 作用域 Slot

作用域 Slot 允许我们在子组件中传递数据到父组件，并在父组件中使用这些数据来渲染 Slot 内容。

示例代码

<!-- ChildComponent.vue -->
<template>
  <div class="child">
    <slot :user="user"></slot>
  </div>
</template>

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

<!-- ParentComponent.vue -->
<template>
  <div class="parent">
    <ChildComponent v-slot:default="slotProps">
      {{ slotProps.user.name }} - {{ slotProps.user.age }}
    </ChildComponent>
  </div>
</template>

在这个示例中，ChildComponent 组件中定义了一个作用域 Slot，并通过 :user="user" 传递了 user 数据。在 ParentComponent 中使用 ChildComponent 时，通过 v-slot:default="slotProps" 来接收 user 数据，并在 Slot 内容中使用。

4. 动态 Slot 名称

Vue 3 引入了动态 Slot 名称的支持，允许我们通过变量来动态指定 Slot 的名称。

示例代码

<!-- ChildComponent.vue -->
<template>
  <div class="child">
    <slot :name="dynamicSlotName"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'header'
    };
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div class="parent">
    <ChildComponent>
      <template #[dynamicSlotName]>
        Custom Header
      </template>
    </ChildComponent>
  </div>
</template>

在这个示例中，ChildComponent 组件中定义了一个动态 Slot 名称，并通过 :name="dynamicSlotName" 传递了 dynamicSlotName 变量。在 ParentComponent 中使用 ChildComponent 时，通过 #[dynamicSlotName] 来动态指定 Slot 的名称。

5. 总结

Vue 的 Slot 是一个非常强大的特性，它允许我们在组件中定义可替换的内容区域，从而实现更灵活的组件组合和内容分发。通过基本 Slot、具名 Slot、作用域 Slot 和动态 Slot 名称，我们可以构建出结构清晰、功能丰富的组件系统。希望本文能够帮助你全面理解 Vue 的 Slot 用法，并在实际开发中发挥其最大的价值。