Vue中如何用$attrs构建组件，实现长尾词疑问？

本文共计1866个文字，预计阅读时间需要8分钟。

目录- 什么是$attrs- attrs V3 vs $attrs V2- 事例：添加一些属性- 添加和值- $attrs救命：inheritAttrs: false- 本节课，我们来探讨Vue3中的$attrs属性。

首先，我们会介绍它的用途以及它的实现与Vu。

目录

• 什么是$attrs
• attrs V3 vs $attrs V2
• 事例
• 添加一些属性
• 添加标题和值
• $attrs 救场
• inheritAttrs: false

这节课，我们来看下 Vue3 中的$attrs属性。首先，我们会介绍它的用途以及它的实现与 Vue2 有哪些不两同点，并通过事例来加深对它的理解。

真正理解了$attrs属性有助于我们构建易于使用和可扩展的高级组件

什么是$attrs

对$attrs定义， Vue2 与 Vue3 是不一样的，这里我们主要来介绍 Vue3 的版本：

$attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

$attrs也可以被看作是一个安全网，它可以捕获任何我们没有在组件中声明的东西。