Vue3插槽（Slot）详解

在Vue3中，插槽（Slot）是一种强大的工具，它允许我们在组件中插入任何类型的内容。本文将详细介绍Vue3中的插槽。

一、什么是插槽（Slot）

在Vue.js中，插槽是一种分发内容的机制，它允许我们在子组件中插入父组件的任何内容。简单来说，插槽就像一个占位符，我们可以在其中放置任何我们想要的内容。

二、默认插槽

默认插槽是最简单的插槽类型。如果我们在子组件中没有指定插槽内容，那么父组件中的内容将会被默认插入。以下是一个例子：

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>这是默认插槽的内容</ChildComponent>
</template>

在这个例子中，"这是默认插槽的内容"将会被插入到的位置。

三、具名插槽

具名插槽允许我们在子组件中定义多个插槽，并通过名称来区分它们。这样，我们就可以在父组件中为每个插槽指定不同的内容。以下是一个例子：

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent>
      <template #header>
        <h3>这是头部插槽的内容。</h3>
      </template>
      <template #footer>
        <p>这是底部插槽的内容。</p>
      </template>
    </ChildComponent>
  </div>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>子组件</h3>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在上述示例中，我们在父组件的模板中为ChildComponent定义了两个具名插槽：header和footer。

在子组件的模板中，我们通过使用元素的name属性来定义具名插槽，将插槽内容分发到相应位置。这样，我们可以在父组件中根据需求为子组件的不同插槽传递不同的内容

四、作用域插槽

<!-- ParentComponent.vue -->
<script setup lang="ts">
import ChildSlot from "@/views/ChildSlot/ChildSlot.vue";
import { reactive } from "vue";
</script>

<template>
  <div>
    <h2>父组件</h2>
    <ChildSlot>
      <template #default="props">
        <p>{{ props.message }}</p>
      </template>
    </ChildSlot>
  </div>
</template>

<style scoped></style>


<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>子组件</h3>
    <slot :message="message"></slot>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
</script>

在上述示例中，我们在父组件中使用作用域插槽，并通过props参数访问子组件的数据。

五、动态插槽

<!-- ParentComponent.vue -->
<script setup lang="ts">
import ChildSlot from "@/views/ChildSlot/ChildSlot.vue";
import { ref } from "vue";
const slotName = ref<string>("footer");
</script>

<template>
  <div>
    <h2>父组件</h2>
    <ChildSlot>
      <template #[slotName]>
        <h3>动态插槽的内容。</h3>
      </template>
    </ChildSlot>
  </div>
</template>

<style scoped></style>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>子组件</h3>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
</script>

在上述示例中，通过改变变量slotName，可使动态插槽的内容。插入到不同的位置

六、总结

Vue3的插槽功能非常强大，它允许我们在组件间灵活地分发和接收内容。无论是默认插槽、具名插槽、作用域插槽还是动态插槽，都能满足我们在实际开发中的各种需求。