前言

上一章我们说到，对于单个根元素的子组件来说，使用时在其上面声明的class、style以及事件等，会发生一个透传的行为。但有些时候，我想对透传的属性进行一个自定义继承。这个时候要怎么做呢？这就引出了我们今天的主角--$attrs。下面我们来看一看。

$attrs

我们可以通过$attrs访问透传进来的属性，不仅如此，$attrs 里面还包含了除组件所声明的 props 和 emits 之外的所有其他属性。

这样我们就可以自定义继承了。

<span>所有属性： {{ $attrs }}</span>
复制代码

但是，还有一点要注意的是，我们还要禁止组件的默认透传行为，这个时候我们就可以通过inheritAttrs属性，设为 false 来进行禁用。

如果使用了<script setup>，就需要一个额外的 <script> 标签来添加这个选项：

<script>
export default {
  inheritAttrs: false
}
</script>
<script setup>
// ...setup 部分逻辑
</script>
复制代码

注意：

• 透传的属性会保留大小写，所以像这 title-n 样的一个 属性 需要通过 $attrs['title-n'] 来访问。
  
• 透传的v-on 事件监听器可以通过$attrs.onClick进行访问。

对于多根节点的组件，没有自动的透传行为。如果$attrs没有显示绑定的话，vue会进行一个警告。

所以，对于这种情况的话，需要对其显示绑定：

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
复制代码

js中访问$attrs

如果想要在<script setup>访问透传下来的属性的话，需要通过vue 提供的 useAttrs() API来进行访问透传的所有属性：

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>
复制代码

有一点需要需要注意的是，useAttrs()得到的attrs并不是响应式的，也就意味着你不能通过侦听器监听他的变化。

所以，需要响应式的话，建议还是props，或者在onUpdated()声明周期内，获得最新的$attrs。