[[Vue]]でコンポーネントに指定された[[属性 (HTML)|属性]]が、コンポーネントに明示的に宣言されていなかった場合にルート要素に自動で追加される仕組み[^1]。[[v-on (Vue)|v-on]]で指定されたもののうち、`emits`で宣言されていないものも含まれる。
[^1]: 単一ルートかつデフォルトの場合
`components/Comp.vue`
```html
<script setup lang="ts">
defineProps<{
hoge: string;
}>();
</script>
<template>
<pre>
{{ $attrs }}
</pre>
</template>
```
`App.vue`
```html
<script setup lang="ts">
import Comp from "./components/Comp.vue";
</script>
<template>
<Comp hoge="aaa" fuga="bbb" class="hoge" />
</template>
```
`hoge`は[[フォールスルー属性 (Vue)|フォールスルー属性]]ではないので、`fuga`と`class`だけが表示される。
```json
{
"class": "hoge",
"fuga": "bbb"
}
```
> [!note]
> [[inheritAttrs (Vue)|inheritAttrs]]を`false`にしても、`$attrs`の表示内容は変わらない。
## MOC
- 📒**関連**
- [[フォールスルー属性を無効 (Vue)]]
- 📜**アクティビティ**
- 📝**トラブルシューティング**
- [[📝$attrsで表示されないフォールスルー属性がある]]