前言

上一章我们说到，对于单个根元素的子组件来说，使用时在其上面声明的 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。