Vue 3的“：如何利用`useSlots`与`useAttrs`？

好的，让我们深入探讨 Vue 3 <script setup> 中的 useSlots 和 useAttrs 这两个强大的 API。

讲座：Vue 3 <script setup> 中的 useSlots 和 useAttrs

大家好！今天我们将深入探讨 Vue 3 <script setup> 语法糖中的两个关键 API：useSlots 和 useAttrs。 这两个函数使我们能够更简洁、更有效地访问组件的插槽和属性。 理解并掌握它们对于构建可重用、灵活的 Vue 组件至关重要。

1. 理解插槽（Slots）

在深入 useSlots 之前，我们先简要回顾一下插槽的概念。 插槽是 Vue 组件中的占位符，允许父组件向子组件传递内容。 这使得子组件能够以可配置的方式显示来自父组件的信息。

Vue 中主要有三种类型的插槽：

• 默认插槽（Default Slot）： 没有名字的插槽。 如果父组件在子组件标签中直接放置内容，该内容将渲染到默认插槽中。

• 具名插槽（Named Slots）： 具有特定名称的插槽。 父组件可以使用 v-slot 指令（简写为 #）将内容传递到特定的具名插槽。

• 作用域插槽（Scoped Slots）： 允许子组件向插槽传递数据，父组件可以使用这些数据来定制插槽内容的渲染。

2. useSlots 的作用和用法

useSlots 是一个 Vue 3 Composition API，只能在 <script setup> 中使用。 它返回一个对象，该对象包含了当前组件的所有插槽。

基本用法：

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

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

const slots = useSlots();

console.log(slots); // 输出一个包含所有插槽的对象
</script>

在上面的例子中，useSlots() 返回的对象包含了三个插槽：header、default 和 footer。

检查插槽是否存在：

可以使用 slots 对象来检查特定插槽是否存在。

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

const slots = useSlots();

onMounted(() => {
  if (slots.header) {
    console.log('Header 插槽存在');
  } else {
    console.log('Header 插槽不存在');
  }
});
</script>

渲染插槽内容：

虽然 useSlots 返回的是插槽对象，但通常我们不需要直接使用它来渲染插槽内容。 Vue 会自动将父组件传递的内容渲染到对应的插槽中。 useSlots 主要用于检查插槽是否存在或进行更高级的操作，例如动态地决定渲染哪个插槽。

使用场景示例：

假设我们要创建一个通用的 Card 组件，它具有 Header、Body 和 Footer 三个部分，并且允许父组件自定义这些部分的内容。

<!-- Card.vue -->
<template>
  <div class="card">
    <div class="card-header" v-if="slots.header">
      <slot name="header"></slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
    <div class="card-footer" v-if="slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

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

const slots = useSlots();
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}

.card-header {
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.card-body {
  padding: 10px;
}

.card-footer {
  padding: 10px;
  background-color: #f0f0f0;
  border-top: 1px solid #ccc;
}
</style>

<!-- ParentComponent.vue -->
<template>
  <Card>
    <template #header>
      <h2>Card Title</h2>
    </template>
    <p>This is the card content.</p>
    <template #footer>
      <button>OK</button>
      <button>Cancel</button>
    </template>
  </Card>

  <Card>
    <p>This is the card content without header and footer.</p>
  </Card>
</template>

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

在这个例子中，Card 组件使用 useSlots 来检查 header 和 footer 插槽是否存在。 如果存在，则渲染对应的插槽内容。 这使得 Card 组件非常灵活，可以根据父组件的需求显示不同的内容。

3. 理解属性（Attributes）

组件属性是从父组件传递到子组件的数据。 在 Vue 中，属性可以分为两种类型：

• 声明的属性（Declared Props）： 通过 props 选项显式声明的属性。 Vue 会对这些属性进行类型检查和验证。

• 透传的属性（Non-Prop Attributes）： 没有在 props 选项中声明的属性。 这些属性会直接应用到组件的根元素上。

4. useAttrs 的作用和用法

useAttrs 是另一个 Vue 3 Composition API，只能在 <script setup> 中使用。 它返回一个对象，该对象包含了当前组件的所有透传的属性（也就是没有在 props 中声明的属性）。

基本用法：

<template>
  <div>
    <p>Some Content</p>
  </div>
</template>

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

const attrs = useAttrs();

console.log(attrs); // 输出一个包含所有透传属性的对象
</script>

假设父组件传递了以下属性：

<!-- ParentComponent.vue -->
<template>
  <MyComponent class="custom-class" data-id="123" title="My Component" />
</template>

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

并且 MyComponent.vue 没有声明 class、data-id 或 title 作为 props，那么 useAttrs() 将返回：

{
  "class": "custom-class",
  "data-id": "123",
  "title": "My Component"
}

访问和使用属性：

可以使用 attrs 对象来访问和使用透传的属性。

<template>
  <div :class="attrs.class" :data-id="attrs['data-id']">
    <p>{{ attrs.title }}</p>
    <p>Some Content</p>
  </div>
</template>

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

const attrs = useAttrs();
</script>

注意： 直接将 attrs 绑定到根元素通常不是最佳实践，因为它可能会覆盖组件内部的属性。 更好的做法是显式地将需要的属性绑定到根元素或其他元素上。

与 props 的区别：

useAttrs 只包含透传的属性，不包含在 props 选项中声明的属性。 如果需要在组件内部访问 props 中声明的属性，可以直接使用 props 对象（在 <script setup> 中会自动暴露）。

使用场景示例：

假设我们要创建一个 Button 组件，它具有一些默认样式，并且允许父组件传递额外的 CSS 类名和 data 属性。

<!-- Button.vue -->
<template>
  <button class="my-button" v-bind="attrs">
    <slot></slot>
  </button>
</template>

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

const attrs = useAttrs();
</script>

<style scoped>
.my-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

<!-- ParentComponent.vue -->
<template>
  <Button class="primary-button" data-action="submit">Click Me</Button>
</template>

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

在这个例子中，Button 组件使用 useAttrs 获取所有透传的属性，并使用 v-bind="attrs" 将它们绑定到根元素上。 这使得父组件可以轻松地自定义 Button 组件的样式和行为。 父组件传递的 class="primary-button" 会与组件内部的 class="my-button" 合并，而 data-action="submit" 也会被添加到 button 元素上。

5. useSlots 和 useAttrs 的组合使用

useSlots 和 useAttrs 可以结合使用，以构建更复杂和灵活的组件。 例如，可以根据插槽的存在与否来动态地添加或删除某些属性。

示例：

假设我们要创建一个 Alert 组件，它具有一个可选的 Close 按钮。 只有当存在 close 插槽时，才显示 Close 按钮，并且 Close 按钮需要继承父组件传递的 data-close-id 属性。

<!-- Alert.vue -->
<template>
  <div class="alert">
    <div class="alert-content">
      <slot></slot>
    </div>
    <button v-if="slots.close" class="alert-close" :data-id="attrs['data-close-id']" @click="handleClose">
      <slot name="close"></slot>
    </button>
  </div>
</template>

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

const slots = useSlots();
const attrs = useAttrs();
const emit = defineEmits(['close']);

const handleClose = () => {
  emit('close');
};
</script>

<style scoped>
.alert {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}

.alert-close {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
</style>

<!-- ParentComponent.vue -->
<template>
  <Alert data-close-id="alert-123" @close="handleAlertClose">
    This is an alert message.
    <template #close>
      X
    </template>
  </Alert>
</template>

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

const handleAlertClose = () => {
  alert('Alert closed!');
};
</script>

在这个例子中，Alert 组件使用 useSlots 来检查 close 插槽是否存在。 如果存在，则显示 Close 按钮，并使用 useAttrs 获取 data-close-id 属性并将其绑定到 Close 按钮上。 defineEmits 用于声明组件可以触发的 close 事件。

6. 关于属性优先级的问题

当父组件传递的属性与组件内部定义的属性冲突时，Vue 会按照一定的优先级规则来决定使用哪个属性。 一般来说，props 中声明的属性具有更高的优先级，会覆盖透传的属性。 如果透传的属性与组件根元素上的原生属性冲突，则原生属性具有更高的优先级。

7. 表格总结 useSlots 和 useAttrs

特性	useSlots	useAttrs
作用	访问组件的插槽	访问组件的透传属性
返回值	一个包含所有插槽的对象	一个包含所有透传属性的对象
使用场景	检查插槽是否存在、动态渲染插槽内容	获取和使用透传属性，自定义组件行为和样式
与 props	无关，仅处理插槽	只包含未在 props 中声明的属性

8. 实践建议

• 显式声明 props： 尽可能显式地声明组件的 props，以便进行类型检查和验证。

• 谨慎使用 useAttrs： 避免直接将 attrs 绑定到根元素，以免覆盖组件内部的属性。

• 充分利用插槽： 使用插槽来创建可重用和可配置的组件。

• 组合使用 useSlots 和 useAttrs： 根据插槽的存在与否来动态地添加或删除某些属性，以实现更灵活的组件行为。

9. 最佳实践

• 明确组件接口： 清晰地定义组件的 props 和插槽，以便其他开发者能够轻松地使用你的组件。

• 保持组件的简洁性： 避免在组件中进行过多的逻辑处理，尽量将逻辑提取到 Composition API 中。

• 编写单元测试： 为你的组件编写单元测试，以确保其功能正常。

10. 深入理解透传属性的继承规则

在 Vue 中，透传属性的行为受到一些规则的约束。 默认情况下，未在 props 中定义的属性会被添加到组件的根元素上。 然而，如果组件的根元素已经具有同名的属性，则透传的属性会被覆盖。 例如：

<!-- MyComponent.vue -->
<template>
  <div id="my-component" title="Default Title">
    <p>Content</p>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <MyComponent title="Parent Title" />
</template>

在这个例子中，MyComponent 的根元素已经具有 title 属性，并且其值为 "Default Title"。 父组件传递了 title="Parent Title" 作为透传属性。 由于根元素已经存在 title 属性，因此透传的 title 属性会被覆盖，最终渲染的结果是 title="Default Title"。

为了避免这种覆盖，可以使用 v-bind="$attrs" 将透传属性绑定到其他元素上，或者使用 useAttrs 获取透传属性并手动进行处理。

11. 高级用法：动态插槽名称

虽然不常见，但有时可能需要在运行时动态地决定要渲染哪个具名插槽。 这可以通过结合使用 useSlots 和计算属性来实现。

<template>
  <div>
    <slot :name="dynamicSlotName"></slot>
  </div>
</template>

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

const slots = useSlots();
const slotType = ref('header'); // 假设 slotType 可以动态改变

const dynamicSlotName = computed(() => {
  if (slotType.value === 'header' && slots.header) {
    return 'header';
  } else if (slotType.value === 'footer' && slots.footer) {
    return 'footer';
  } else {
    return 'default'; // 如果 header 或 footer 插槽不存在，则渲染 default 插槽
  }
});
</script>

在这个例子中，dynamicSlotName 是一个计算属性，它根据 slotType 的值动态地返回插槽的名称。 这允许组件在运行时根据不同的条件渲染不同的插槽。

利用插槽构建灵活的组件。
灵活使用 useSlots 和 useAttrs 组合.
透传属性与 props 的差异理解。