Vue插槽检测之$slots的妙用与最佳实践指南

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

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

<!-- 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>

<!-- 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>

<!-- 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>

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

<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>

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

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

<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>

<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>