Vue 插槽检测：$slots 的妙用与最佳实践

在 Vue 组件开发中，插槽（Slots）是实现组件灵活性的重要特性。但有时候我们需要知道父组件是否传递了某个插槽内容，这时候 $slots 就派上了用场。本文将深入探讨 Vue 中的插槽检测机制。

什么是插槽检测？

插槽检测是指在组件内部判断父组件是否传递了特定的插槽内容。Vue 提供了 $slots 对象来帮助我们实现这一功能。

基本语法

// 在模板中
<div v-if="$slots.search">
  <slot name="search" />
</div>

// 在 Composition API 中
import { useSlots } from 'vue'
const slots = useSlots()
const hasSearchSlot = !!slots.search

实际应用场景

1. 条件渲染容器

在开发 TablePickerDialog 组件时，我们希望在父组件传递了搜索框插槽时才显示搜索区域：

<!-- TablePickerDialog.vue -->
<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <!-- 搜索框插槽 - 只有父组件传递了才显示 -->
    <div v-if="$slots.search" class="search-slot">
      <slot name="search" />
    </div>

    <el-table :data="tableData">
      <!-- 表格内容 -->
    </el-table>
  </Dialog>
</template>

2. 动态表单布局

在复杂的表单组件中，根据插槽内容动态调整布局：

<!-- FollowRecordForm.vue -->
<template>
  <el-form :model="formData">
    <!-- 基础信息区域 -->
    <div class="form-section">
      <h3>基础信息</h3>
      <slot name="basic" />
    </div>

    <!-- 扩展信息区域 - 有条件显示 -->
    <div v-if="$slots.extension" class="form-section">
      <h3>扩展信息</h3>
      <slot name="extension" />
    </div>

    <!-- 附件区域 - 有条件显示 -->
    <div v-if="$slots.attachment" class="form-section">
      <h3>附件</h3>
      <slot name="attachment" />
    </div>
  </el-form>
</template>

3. 组件通信增强

通过插槽检测实现更精细的组件通信：

<!-- AudioPicker.vue -->
<template>
  <div class="audio-picker">
    <!-- 切换按钮 -->
    <div class="switch-tabs">
      <el-radio-group v-model="audioSource">
        <el-radio-button label="upload">上传音频</el-radio-button>
        <el-radio-button label="record" v-if="$slots.record">
          选择录音
        </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 上传区域 -->
    <div v-if="audioSource === 'upload'">
      <slot name="upload" />
    </div>

    <!-- 录音选择区域 -->
    <div v-else-if="audioSource === 'record' && $slots.record">
      <slot name="record" />
    </div>
  </div>
</template>

Vue 2 与 Vue 3 的区别

Vue 2 (Options API)

<script>
export default {
  mounted() {
    // 检测插槽是否存在
    console.log(this.$slots.search) // 具名插槽
    console.log(this.$slots.default) // 默认插槽
  },
  
  computed: {
    hasSearchSlot() {
      return !!this.$slots.search
    }
  }
}
</script>

Vue 3 (Composition API)

<script setup>
import { useSlots, computed } from 'vue'

const slots = useSlots()

// 计算属性方式
const hasSearchSlot = computed(() => !!slots.search)
const hasActionSlot = computed(() => !!slots.action)

// 或者在模板中直接使用
</script>

<template>
  <div v-if="slots.search" class="search-slot">
    <slot name="search" />
  </div>
</template>

最佳实践

1. 性能优化

<!-- 不推荐：总是渲染容器 -->
<div class="search-slot">
  <slot name="search" />
</div>

<!-- 推荐：有条件渲染 -->
<div v-if="$slots.search" class="search-slot">
  <slot name="search" />
</div>

2. 提供默认内容

<template>
  <div class="component-wrapper">
    <!-- 有条件渲染插槽，提供默认内容 -->
    <div v-if="$slots.header" class="header">
      <slot name="header" />
    </div>
    <div v-else class="default-header">
      <h3>默认标题</h3>
    </div>

    <!-- 主要内容 -->
    <div class="content">
      <slot />
    </div>
  </div>
</template>

3. 组合式检测

<script setup>
import { useSlots, computed } from 'vue'

const slots = useSlots()

// 检测多个插槽
const slotStatus = computed(() => ({
  hasSearch: !!slots.search,
  hasAction: !!slots.action,
  hasFooter: !!slots.footer,
  hasDefault: !!slots.default
}))

// 根据插槽状态计算样式类
const containerClass = computed(() => ({
  'with-search': slotStatus.value.hasSearch,
  'with-footer': slotStatus.value.hasFooter,
  'compact': !slotStatus.value.hasSearch && !slotStatus.value.hasFooter
}))
</script>

使用示例：

<template>
  <TablePickerDialog 
    v-model="showDialog" 
    dialogTitle="选择录音"
    :tableData="tableData"
    :tableDefine="columns"
  >
    <!-- 搜索框插槽 -->
    <template #search>
      <el-form :inline="true">
        <el-form-item label="呼叫类型">
          <el-select v-model="searchParams.callType">
            <el-option label="呼入" value="1" />
            <el-option label="呼出" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </template>

    <!-- 操作按钮插槽 -->
    <template #action="{ row }">
      <el-button link type="success" @click="handlePlay(row)">播放</el-button>
      <el-button link type="warning" @click="handleView(row)">详情</el-button>
    </template>

    <!-- 底部插槽 -->
    <template #footer>
      <el-button>自定义操作</el-button>
    </template>
  </TablePickerDialog>
</template>

总结

插槽检测是 Vue 组件开发中的重要技巧，通过合理使用 $slots 可以实现：

1. 条件渲染：避免渲染空的容器元素
2. 动态布局：根据插槽内容调整组件结构
3. 性能优化：减少不必要的 DOM 节点
4. 灵活配置：提供更友好的组件 API

掌握插槽检测能让你的 Vue 组件更加灵活和健壮，提升开发效率和用户体验。

希望这篇文章能帮助你更好地理解和使用 Vue 的插槽检测功能！