【极简】Vue3使用三种插槽

前言

最近在用Vue3写一些公司的业务，感觉Vue3真的很好上手。

今天简单整理一下三种插槽的使用🎈

☀️☀️

下面分别介绍 默认插槽、具名插槽 和 作用域插槽 。

1. 默认插槽

默认插槽是未指定名字的插槽，子组件中未命名的 <slot> 标签代表默认插槽。

子组件 (ChildComponent.vue)

<template>
  <div>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

<script setup>
// 逻辑代码
</script>

父组件

<template>
  <ChildComponent>
    <p>这是默认插槽的内容</p>
  </ChildComponent>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

2. 具名插槽

具名插槽是在 <slot> 标签上指定了 name 属性的插槽。

子组件 (ChildComponent.vue)

<template>
  <div>
    <header>
      <slot name="header"></slot> <!-- 具名插槽 header -->
    </header>
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot> <!-- 具名插槽 footer -->
    </footer>
  </div>
</template>

<script setup>
// 逻辑代码
</script>

父组件

<template>
  <ChildComponent>
    <template #header>
      <p>这是 header 具名插槽的内容</p>
    </template>
    <p>这是默认插槽的内容</p>
    <template #footer>
      <p>这是 footer 具名插槽的内容</p>
    </template>
  </ChildComponent>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

3. 作用域插槽

作用域插槽比较特殊，它可以接收来自子组件的数据，实现子传父。

子组件 (ChildComponent.vue)

<template>
  <div>
    <slot :data="item" v-for="item in items" :key="item.id"></slot> <!-- 作用域插槽 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
])
</script>

父组件

<template>
  <ChildComponent>
    <template #default="{ data }">
      <p>{{ data.name }}</p>
    </template>
  </ChildComponent>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

最后

祝你今天开心。