Vue 3 中的 `$slots` 和 `$attrs` 的作用是什么？

在 Vue 3 中，$slots 和 $attrs 是两个特殊的响应式属性，它们用于组件中的插槽（slots）和属性（attributes）的管理。

$slots

$slots 是一个包含了组件中所有插槽内容的对象。每个插槽都有一个对应的属性，其值为一个包含插槽内容的数组。如果插槽没有内容，那么对应的数组将为空。

作用：

1. 访问插槽内容：可以使用 $slots 来访问子组件传递给父组件的插槽内容。
2. 渲染插槽内容：在父组件的模板中，可以使用 v-slot 指令来指定插槽内容。

示例代码：

<!-- 子组件 -->
<template>
  <ParentComponent>
    <template v-slot:default="slotProps">
      <div>Default slot content</div>
    </template>
    <template v-slot:named="slotProps">
      <div>Named slot content</div>
    </template>
  </ParentComponent>
</template>

<script setup>
import ParentComponent from './ParentComponent.vue';
</script>

<!-- 父组件 -->
<template>
  <div>
    <slot v-bind="slotProps">Default slot content</slot>
    <slot name="named" v-bind="slotProps">Named slot content</slot>
  </div>
</template>

<script setup>
import { useSlots } from 'vue';

const slots = useSlots();
</script>

在这个例子中，子组件使用了两个插槽（一个默认插槽和一个命名插槽），父组件通过 useSlots 钩子函数获取了插槽内容。

$attrs

$attrs 是一个包含了组件接收到的所有属性的对象，但不包括 props 和 class、style 属性。这些属性通常是静态的，不会像 props 那样响应式地更新。

作用：

1. 传递额外属性：可以将 $attrs 中的属性传递给子组件或 DOM 元素。
2. 处理未绑定的属性：可以捕获并处理那些没有在组件中显式绑定的属性。

示例代码：

<!-- 子组件 -->
<template>
  <div v-bind="$attrs">Child component content</div>
</template>

<script setup>
import { useAttrs } from 'vue';
const attrs = useAttrs();
</script>

<!-- 父组件 -->
<template>
  <ChildComponent id="child-component" data-test="value" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

在这个例子中，父组件向子组件传递了 id 和 data-test 属性，子组件通过 useAttrs 钩子函数接收了这些属性，并将其绑定到一个 div 元素上。

总结

$slots 和 $attrs 是 Vue 3 中用于处理插槽和属性的重要工具。$slots 允许你访问和渲染插槽内容，而 $attrs 允许你处理组件接收到的额外属性。通过使用这两个属性，你可以创建更灵活和可复用的组件。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情