this.$slots

### Vue.js 中 `this.$slots` 的用法

在 Vue 组件中，插槽（slot）提供了一种方式来分发内容。通过使用 `$slots` 属性可以访问作用域外的内容并对其进行操作。

#### 访问默认插槽

当组件内定义了一个未命名的 `<slot>` 时，默认情况下它会接收父级传递过来的所有内容：

<!-- ChildComponent.vue -->
<template>
  <div class="child">
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

如果想要获取这个默认插槽的内容，在子组件内部可以通过 `this.$slots.default` 来读取渲染函数形式下的 VNodes 数组[^1]。

#### 命名插槽

对于带有名称属性的 `<slot>` 标签，则可通过对应的键值从 `this.$slots` 对象里取得相应数据：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:header>
      Header Content Here
    </template>
    
    <p>Main content here...</p>
    
    <template v-slot:footer>
      Footer Content Here
    </template>
  </ChildComponent>
</template>

此时可以在子组件中这样处理这些具名插槽:

// Inside ChildComponent methods or lifecycle hooks...
console.log(this.$slots.header); // 获取 header 插槽的数据
console.log(this.$slots.footer); // 获取 footer 插槽的数据

值得注意的是，虽然可以直接遍历 `$slots` 并手动创建 DOM 节点，但这通常不是推荐的做法；更常见的方式是在模板中声明好结构并通过编译器自动完成渲染工作[^2]。

另外需要注意一点，`$scopedSlots` 已经被弃用了，在新版 Vue 版本中应该改用 `v-slot` 指令配合动态参数的形式实现相同功能[^3]。