Vue 3插槽机制与DOM操作实战指南

1. Vue 3 插槽机制深度解析

在 Vue 3 的 Composition API 中，插槽（Slot）作为组件间内容分发的重要机制，其使用方式与 Vue 2 相比有了显著变化。特别是在 <script setup> 语法糖环境下，我们需要理解几个核心概念：

1. 虚拟 DOM 与真实 DOM 的区别：Vue 的渲染流程是先创建虚拟节点（VNode），再将其转换为真实 DOM。useSlots() 获取的是 VNode 而非真实 DOM，这是很多开发者容易混淆的关键点。

2. 渲染时机的差异：在 setup 阶段（即 <script setup> 执行时），组件尚未挂载，此时无法获取真实 DOM。必须在 mounted 生命周期后才能操作 DOM 元素。

3. 作用域隔离：子组件内部的 ref 无法直接获取父组件传递的插槽内容 DOM，这是 Vue 刻意设计的隔离机制，需要通过特定方式突破这种隔离。

2. 获取插槽内容的两种核心方式

2.1 使用 useSlots() 获取 VNode

这是最基础的插槽访问方式，适用于需要基于插槽内容做逻辑判断的场景：

javascript复制<script setup>
import { useSlots } from 'vue'

const slots = useSlots()

// 检查默认插槽是否存在内容
const hasDefaultSlot = !!slots.default

// 获取具名插槽内容
const footerSlot = slots.footer?.() || []

// 高级用法：动态渲染插槽
const renderDynamicSlot = (name) => {
  return slots[name]?.() || h('div', 'Fallback Content')
}
</script>

重要提示：slots.default() 返回的是 VNode 数组，即使只有一个子节点也是如此。如果需要对单个节点操作，需要手动处理数组。

2.2 通过 useAttrs() 实现属性透传

当需要在父组件中访问插槽 DOM 时，属性透传是最简洁的方案：

vue复制<!-- Ch