![image](https://developer.qcloudimg.com/http-save/yehe-1209475/f91953d486cffabb9bb0d28d6fe0dcc0.png)

## 前言

你好，我是喵喵侠，是一名前端开发。

在开发大型应用时，二次封装 UI 组件（如 `ElTable`​、`Antd Table`​ 等）往往是一个常见的需求。为了提升组件的可复用性与灵活性，我们需要优雅地传递父组件的属性，并且灵活重写插槽内容。Vue 3 提供了强大的组合式 API 和模板功能，尤其是 `v-bind="$attrs"`​ 和 `defineSlots`，它们为我们提供了很好的工具来实现属性透传和插槽重写。

今天，我们就来看看如何通过 `v-bind="$attrs"`​ 和 `defineSlots` 来进行属性透传与插槽重写，并使得二次封装的组件更加灵活与易用。

## `v-bind="$attrs"`：属性透传的核心

### 什么是 `$attrs`？

在 Vue 3 中，`$attrs`​ 是一个对象，包含了父组件传递给当前组件的所有属性（包括 `class`​、`style`​、自定义属性等），但不包括 `props`​ 和 `listeners`。它通常用于透传属性，尤其是在封装第三方 UI 组件时非常有用。

```javascript
const TableWrapper = {
  inheritAttrs: false, // 关闭自动属性继承
  setup(props, { attrs }) {
    return () => (
      <ElTable {...attrs} /> // 通过 v-bind="$attrs" 将所有父级传入的属性透传到 ElTable 组件
    );
  },
};
```

在这个例子中，`$attrs`​ 将父组件传递给 `TableWrapper`​ 的所有属性透传给了 `ElTable`​。这样，我们不需要手动将每个属性一一传递给 `ElTable`，使得代码更加简洁与高效。

### 为什么使用 `inheritAttrs: false`？

默认情况下，Vue 会将父组件的所有属性（包括 `class`​ 和 `style`​）自动传递给根元素。如果我们想对这些属性进行自定义处理，比如透传给子组件，就需要将 `inheritAttrs`​ 设置为 `false`。

```javascript
const TableWrapper = {
  inheritAttrs: false, // 禁用自动继承父级属性
  setup(props, { attrs }) {
    return () => (
      <ElTable {...attrs} /> // 通过 v-bind="$attrs" 透传父级所有属性
    );
  },
};
```

### 示例：在二次封装的组件中透传属性

假设我们在封装一个 `ElTable`​ 组件，并希望将 `ElTable`​ 接收的所有属性（例如：`border`​、`stripe` 等）透传给它：

```vue
<template>
  <ElTable v-bind="$attrs" />
</template>

<script setup>
defineProps();
</script>
```

通过 `v-bind="$attrs"`​，我们能够把父组件传入的所有属性传递给 `ElTable`​。这样，`TableWrapper`​ 就不需要手动列出每一个 `ElTable` 的属性，组件的使用者可以自由地通过父组件传递属性。

## `defineSlots`：灵活重写插槽

### 什么是插槽（Slots）？

插槽是 Vue 中用于分发内容的机制。它允许父组件向子组件传递 HTML 内容，并且子组件可以在特定位置插入这些内容。插槽分为默认插槽和命名插槽。

### 在二次封装组件中重写插槽

当你在封装组件时，常常需要对插槽进行自定义处理，或者在已有插槽的基础上增加额外的内容。Vue 3 的 `defineSlots` 允许我们灵活地重写插槽，从而增加更多的自定义功能。

### 示例：重写插槽内容

假设我们需要为 `ElTable`​ 封装一个 `TableWrapper`​，并希望能够重写其中的 `default` 插槽内容。

```vue
<template>
  <ElTable v-bind="$attrs">
    <template #default="{ row }">
      <div>{{ row.name }}</div> 
    </template>
  </ElTable>
</template>

<script setup>
defineProps();
defineSlots();
</script>
```

在这个例子中，我们重写了 `ElTable`​ 的 `default`​ 插槽，用自定义的内容（例如：展示 `row.name`）替换了默认的插槽内容。

## `defineSlots`​ 与 `v-bind="$attrs"` 结合使用

通常情况下，我们会将 `v-bind="$attrs"`​ 与 `defineSlots` 结合使用，提供更灵活的属性透传和插槽内容重写。通过这种方式，我们可以封装出更具可定制性的 UI 组件。

### 示例：封装一个高度可定制的 Table 组件

假设我们要封装一个 `ElTable`​，并希望父组件能够传递任意属性（如 `border`​、`stripe`）以及插槽内容来渲染每一行数据：

```vue
<template>
  <ElTable v-bind="$attrs">
    <template #default="{ row }">
      <div>{{ row.name }}</div> 
    </template>
    <template #header>
      <div>Custom Header</div> 
    </template>
  </ElTable>
</template>

<script setup>
defineProps();
defineSlots();
</script>
```

在这里，`$attrs`​ 用于透传父组件传递的所有属性，`defineSlots`​ 则允许我们重写插槽（如 `default`​ 和 `header`），从而为表格提供更多的自定义内容。

## 总结

在 Vue 3 中，`v-bind="$attrs"`​ 和 `defineSlots`​ 提供了强大的工具来实现属性透传和插槽内容重写。通过 `v-bind="$attrs"`​，我们能够将父组件的所有属性优雅地传递给子组件，而不需要一一列出。在此基础上，`defineSlots` 使得我们可以灵活地重写插槽内容，从而实现更高自定义的 UI 组件。

在进行 UI 组件二次封装时，正确使用 `v-bind="$attrs"`​ 和 `defineSlots` 可以极大地提升组件的复用性、可维护性和灵活性。

在开发大型应用时，二次封装 UI 组件（如 ElTable​、Antd Table​ 等）往往是一个常见的需求。为了提升组件的可复用性与灵活性，我们需要优雅地传递父组件的属性，并且灵活重写插槽内容。Vue 3 提供了强大的组合式 API 和模板功能，尤其是 v-bind="$attrs"​ 和 defineSlots，它们为我们提供了很好的工具来实现属性透传和插槽重写。

Vue 3 二次封装技巧：如何用 v-bind="$attrs" 和 defineSlots 优雅处理插槽与属性

前端

Vue3组件封装技巧：通过v-bind="$attrs"实现属性透传，结合defineSlots灵活重写插槽内容。学习如何优雅封装ElTable等UI组件，提升代码复用性和灵活性。掌握Vue3组合式API在二次封装中的实践应用，打造高可定制的前端组件。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vue 3 二次封装技巧：如何用 v-bind="$attrs" 和 defineSlots 优雅处理插槽与属性-腾讯云开发者社区-腾讯云

Vue 3 二次封装技巧：如何用 v-bind="$attrs" 和 defineSlots 优雅处理插槽与属性

Vue 3 二次封装技巧：如何用 v-bind="$attrs" 和 defineSlots 优雅处理插槽与属性

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐