4. 作用域插槽传递数据

4.1 作用域插槽的数据传递模型

作用域插槽（Scoped Slots）是 Vue 组件化架构中实现“子组件提供数据、父组件决定渲染”的核心机制。与普通插槽不同，作用域插槽允许子组件将内部数据通过插槽属性（Slot Props）暴露给父组件，父组件在模板中接收这些数据并构造自定义内容。这种模式将数据所有权与渲染控制权分离，是构建高度可复用组件的基础。

数据流方向始终遵循：

  • 子组件 → 通过 v-bind 将数据绑定到 <slot> 元素上
  • 父组件 → 通过 v-slot 指令接收暴露的数据对象
  • 渲染输出 → 父组件利用接收到的数据构造任意模板内容
架构要点：作用域插槽的本质是“子组件声明数据接口，父组件注入视图实现”。这一设计让 BottomNavigation 的每个标签按钮可以向外暴露自身的激活状态、索引、原始数据项，从而让使用者能够完全控制按钮的样式、动画和交互反馈。
作用域插槽数据流：子组件 → 父组件 子组件边界 父组件边界 子组件本地数据 data / state / props 定义插槽 Props :item / :index / :active <slot> 出口 v-bind 传递数据对象 父组件 v-slot 接收 v-slot="{ item, index, active }" 自定义内容渲染 完全由父组件控制 UI 数据流方向：子组件内部状态 → 插槽 Props → 父组件消费 → 渲染输出

4.2 定义插槽Props：子组件的暴露接口

在子组件中，通过 v-bind 将数据绑定到 <slot> 元素上，这些绑定的属性即成为插槽 Props。父组件通过 v-slot 接收到的正是这些属性的集合对象。

4.2.1 基础语法

<!-- BottomNavigationItem.vue -->
<template>
  <li class="nav-item">
    <!-- 将当前项数据暴露给父组件 -->
    <slot :item="item" :index="index" :active="isActive">
      <!-- 默认内容：当父组件未提供插槽时渲染 -->
      <button class="default-btn">
        {{ item.label }}
      </button>
    </slot>
  </li>
</template>

<script setup lang="ts">
import type { NavItem } from './types'

defineProps<{
  item: NavItem
  index: number
  activeValue: string
}>()

// 计算激活状态
const isActive = computed(() => {
  return props.item.value === props.activeValue
})
</script>

4.2.2 传递多个数据项

作用域插槽可以同时暴露多个属性，父组件可以按需解构使用：

<!-- 子组件暴露完整数据接口 -->
<slot
  :item="item"
  :index="index"
  :active="isActive"
  :icon="item.icon"
  :label="item.label"
  :badge="item.badge"
  :disabled="item.disabled"
>
  <!-- 默认回退 UI -->
  <button class="nav-btn" :disabled="item.disabled">
    {{ item.label }}
  </button>
</slot>
设计建议：插槽 Props 的粒度过细会导致维护成本升高，建议按语义分组暴露。例如将整个 item 对象作为一个 prop 传递，再补充几个计算属性（active、index）作为额外 prop，既保持灵活性又降低接口复杂度。

4.3 TypeScript 类型声明：为插槽Props加持类型安全

Vue 3.3+ 引入了 defineSlots 宏，可以为作用域插槽提供完整的 TypeScript 类型推断。这使得父组件在使用插槽时能够获得精准的代码补全和类型检查。

4.3.1 使用 defineSlots 声明插槽类型

<!-- BottomNavigationItem.vue 增强类型声明 -->
<script setup lang="ts">
import type { NavItem } from './types'

defineProps<{
  item: NavItem
  index: number
  activeValue: string
}>()

// 显式声明插槽 Props 的类型
defineSlots<{
  default(props: {
    item: NavItem
    index: number
    active: boolean
    icon: string
    label: string
    badge?: number
    disabled: boolean
  }): any
}>()

const isActive = computed(() => {
  // ...
})
</script>

4.3.2 为具名插槽声明类型

<!-- 多插槽类型声明示例 -->
<script setup lang="ts">
defineSlots<{
  default(props: { item: NavItem; index: number; active: boolean }): any
  icon(props: { iconName: string; active: boolean }): any
  label(props: { text: string; active: boolean }): any
}>()
</script>

4.3.3 通过组件选项类型扩展（兼容Vue 3.2及更早）

// 对于未使用 defineSlots 的项目，可以在组件选项上声明
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    item: Object as PropType<NavItem>,
    index: Number,
    activeValue: String
  },
  slots: {
    default: (props: {
      item: NavItem
      index: number
      active: boolean
    }) => any
  } as const,
  setup(props, { slots }) {
    // 通过 slots 对象访问插槽
  }
})
类型声明方式适用范围类型推断强度推荐场景
defineSlots 宏Vue 3.3+ / <script setup>★★★★★ 完整推断新项目、升级项目
组件选项 slots 属性Vue 3.x 传统选项式★★★★☆ 较好选项式架构项目
泛型组件 + SlotsTypeVue 3.3+ 泛型组件★★★★★ 完整推断高阶泛型组件库
运行时无类型所有版本★☆☆☆☆ 无类型快速原型、纯JS项目
常见误判：有些开发者认为“父组件使用 v-slot 时只要数据能渲染就行，类型声明可有可无”。但在大型团队协作中，缺少插槽 Props 类型声明会导致：① 父组件无法获得属性名补全；② 重构子组件数据时无法自动发现消费方；③ 运行时错误无法被编译期捕获。强烈建议始终为插槽 Props 编写类型声明。

4.4 子组件向父组件暴露数据：消费端实现

父组件通过 v-slot 指令接收子组件暴露的数据，语法上支持解构、重命名和默认值设置。

4.4.1 基础接收模式

<!-- 父组件中使用 BottomNavigationItem -->
<BottomNavigationItem
  v-for="(navItem, idx) in navList"
  :key="navItem.value"
  :item="navItem"
  :index="idx"
  :active-value="currentActive"
>
  <!-- 通过 v-slot 接收插槽 Props -->
  <template v-slot="{ item, index, active }">
    <button
      :class="['custom-btn', { active }]"
      @click="handleNavClick(item, index)"
    >
      <span class="icon">{{ item.icon }}</span>
      <span class="label">{{ item.label }}</span>
      <span v-if="active" class="active-indicator">●</span>
    </button>
  </template>
</BottomNavigationItem>

4.4.2 解构与重命名

<!-- 解构并重命名避免命名冲突 -->
<template v-slot="{ item: navData, index: pos, active: isActiveItem }">
  <div :data-position="pos" class="nav-cell">
    <img :src="navData.iconUrl" :alt="navData.label" />
    <span :class="{ highlight: isActiveItem }">{{ navData.label }}</span>
  </div>
</template>

4.4.3 使用具名插槽 + 作用域数据

<!-- 子组件定义多个具名作用域插槽 -->
<nav class="bottom-nav">
  <slot name="leading" :active="isActive" :item="item" />
  <slot name="content" :item="item" :active="isActive" />
  <slot name="trailing" :badge="item.badge" />
</nav>

<!-- 父组件分别消费 -->
<BottomNavigation>
  <template #leading="{ active, item }">
    <div class="icon-wrapper" :class="{ bounce: active }">
      {{ item.icon }}
    </div>
  </template>

  <template #content="{ item }">
    <span class="nav-label">{{ item.label }}</span>
  </template>

  <template #trailing="{ badge }">
    <span v-if="badge" class="badge">{{ badge }}</span>
  </template>
</BottomNavigation>

4.5 高级模式：函数传递与双向绑定

作用域插槽不仅可以传递数据，还可以传递方法，实现子组件触发父组件逻辑的“逆向通信”。

4.5.1 传递回调函数

<!-- 子组件暴露点击处理方法 -->
<slot
  :item="item"
  :active="isActive"
  :on-select="handleSelect"
  :on-long-press="handleLongPress"
>
  <button @click="handleSelect">{{ item.label }}</button>
</slot>

<!-- 父组件使用回调 -->
<template v-slot="{ item, onSelect }">
  <button class="custom-nav-btn" @click="onSelect">
    {{ item.label }}
  </button>
</template>

4.5.2 暴露更新函数实现“双向绑定”效果

<!-- 子组件暴露 update:active 函数 -->
<slot
  :item="item"
  :active="isActive"
  :update-active="(val: string) => emit('update:activeValue', val)"
>
  <button @click="emit('update:activeValue', item.value)">
    {{ item.label }}
  </button>
</slot>

<!-- 父组件通过插槽实现 v-model 效果 -->
<template v-slot="{ item, active, updateActive }">
  <button
    :class="{ active }"
    @click="updateActive(item.value)"
  >
    {{ item.label }}
  </button>
</template>
架构洞察：将回调函数放入插槽 Props 是一种“显式委托”模式。与直接使用 emit 事件相比，这种方式让父组件在消费数据的同时可以精确控制“何时绑定、以何种方式绑定”事件处理逻辑，在可复用组件库中尤其常见。

4.6 常见错误与调试指南

错误表现根本原因解决方案
父组件接收到的插槽值为 undefined子组件未使用 v-bind 绑定属性，或绑定的变量名拼写错误检查子组件 <slot> 上的 v-bind 绑定，确认变量作用域
TypeScript 提示“属性不存在”插槽 Props 未声明类型，或声明与实际绑定的属性不匹配使用 defineSlots 或组件选项 slots 补全类型声明
父组件无法解构插槽数据使用 v-slot 时漏写了花括号或解构语法错误确认写法为 v-slot="{ prop1, prop2 }"，检查嵌套层级
具名插槽的数据未传递到父组件子组件在具名插槽上未绑定数据，或父组件使用了错误的插槽名确认子组件 <slot name="xxx" :data="...">，父组件 #xxx="{ data }"
插槽默认内容始终显示父组件提供的插槽内容与子组件的条件渲染逻辑冲突检查子组件中 <slot> 是否有条件渲染指令，确保插槽出口正确渲染
调试建议：当插槽数据没有按预期传递时，优先在子组件中使用 console.log(slots.default()) 或在父组件中使用 v-slot="{ ...all }" 展开所有属性来排查。同时利用 Vue Devtools 的“组件树”面板可以直观地看到每个插槽的 Props 值。

4.7 本章小结

作用域插槽的数据传递机制是 Vue 组件化体系中“数据与视图分离”的最佳实践。通过精确定义插槽 Props、使用 TypeScript 强化类型安全、以及灵活运用解构与回调传递，开发者可以构建出既健壮又高度可定制的 BottomNavigation 组件。在实际项目中，建议始终为插槽 Props 编写显式类型声明，并将暴露的数据接口控制在 5～7 个属性以内，以保持组件的可维护性和可读性。

← 上一章 📖 返回目录 下一章 →