📚 课程目录第1章 BottomNavigation组件架构

1. BottomNavigation组件架构

在现代前端组件化架构中，插槽（Slot） 是组件提供自定义内容注入的核心机制。BottomNavigation 作为应用中最常用的导航组件之一，其槽位设计决定了组件在不同业务场景下的灵活性与可扩展性。本章将系统介绍 Slot 的基本概念、三种插槽类型（默认插槽、命名插槽、作用域插槽）在 BottomNavigation 中的具体应用方式，以及它们如何影响组件架构。

1.1 Slot机制概述

插槽实质上是一种内容分发协议：子组件声明一个或多个占位区域，父组件在引用子组件时向这些区域填充自定义内容。这种模式将渲染控制权交给父组件，同时保持子组件的结构与样式框架。在 BottomNavigation 中，槽位位于每一个导航项（Tab）的内部，用于承载图标、标签、徽标等可变内容。

插槽类型	定义方式	父组件控制范围	典型用途
默认插槽（Default Slot）	`<slot>`	全部标签内容	纯文本或简单图标
命名插槽（Named Slot）	`<slot name="xxx">`	特定命名区域	图标、标签、角标分离定制
作用域插槽（Scoped Slot）	`<slot :item="...">`	子组件数据暴露给父组件	基于选中状态渲染不同样式

架构原则：先定义默认插槽兜底内容，再按业务复杂度逐步升级到命名插槽和作用域插槽。避免一开始就过度设计。

1.2 默认插槽（Default Slot）

默认插槽是最简单的内容分发方式：子组件在 <slot> 标签处预留渲染位置，父组件通过组件标签内部的内容直接填充。在 BottomNavigation 中，默认插槽通常用于渲染导航项的标签文字。

<!-- BottomNavigationItem.vue  (子组件) -->
<button class="nav-item">
  <slot></slot>
</button>

<!-- 父组件使用 -->
<BottomNavigationItem>首页</BottomNavigationItem>
<BottomNavigationItem>发现</BottomNavigationItem>

默认插槽的优点在于简洁，父组件无需关心内部结构。但缺点是所有导航项必须遵循相同的布局模板，无法独立控制图标与文字的位置。

1.3 命名插槽（Named Slots）

当导航项需要包含多个独立区域时（例如左侧图标、中间文字、右上角徽标），命名插槽允许子组件定义多个具名占位。父组件通过 v-slot:name 语法将内容精准注入对应区域。

<!-- BottomNavigationItem.vue -->
<button class="nav-item">
  <div class="icon-area"><slot name="icon"></slot></div>
  <div class="label-area"><slot name="label"></slot></div>
  <div class="badge-area"><slot name="badge"></slot></div>
</button>

<!-- 父组件使用 -->
<BottomNavigationItem>
  <template v-slot:icon>🏠</template>
  <template v-slot:label>首页</template>
  <template v-slot:badge>3</template>
</BottomNavigationItem>

命名插槽提供了细粒度的定制能力，使组件内部布局更灵活，同时保持结构稳定。

1.4 作用域插槽（Scoped Slots）

作用域插槽进一步将子组件的内部状态（如当前数据项、选中状态、索引）作为属性暴露给父组件。父组件可以根据这些动态数据决定渲染内容，实现高度业务定制。

<!-- BottomNavigationItem.vue -->
<button 
  class="nav-item" 
  :class="{ active: isActive }"
  @click="$emit('select')"
>
  <slot :item="navItem" :active="isActive">
    <!-- 默认内容：显示标签文字 -->
    {{ navItem.label }}
  </slot>
</button>

<!-- 父组件使用 -->
<BottomNavigationItem 
  v-for="item in items" 
  :key="item.id"
  :navItem="item"
  :isActive="current === item.id"
  @select="current = item.id"
>
  <template v-slot:default="{ item, active }">
    <span :style="{ color: active ? 'blue' : 'gray' }">{{ item.label }}</span>
  </template>
</BottomNavigationItem>

  关键区别：默认插槽和命名插槽只能传递静态模板，作用域插槽则允许父组件访问子组件的动态数据。在 BottomNavigation 中，利用 active 状态可以轻松实现选中项高亮、图标切换等交互。

1.5 组件架构图

下面的 SVG 图展示了 BottomNavigation 组件的整体架构，包括根组件、导航项循环体以及三种插槽的数据流向。

注意：当同时使用默认插槽和作用域插槽时，父组件必须明确写出 v-slot:default 或 v-slot 来接收数据，否则作用域数据不会被传递。

1.6 实践建议与常见陷阱

优先使用默认插槽：在需求不明确时，先用默认插槽保持简单。后续可通过添加命名插槽迁移，不破坏已有用法。
命名插槽前缀规范：建议使用 icon、label、badge 等语义化名称，避免使用 slot1、slot2 等抽象命名。
作用域插槽数据最小化：只暴露导航项必须的状态（如 active、item），不要将整个组件实例传递出去。
避免插槽嵌套过深：BottomNavigation 最多两层插槽（父组件直接填充），避免出现三级插槽导致维护困难。
TypeScript 类型增强：对于作用域插槽，应声明导出插槽类型，便于 IDE 提示。后续章节会详细介绍。