## 事象
`Comp.vue`
```html
<script setup lang="ts">
import Comp from "./components/Comp.vue";
</script>
<template>
<Comp hoge="aaa" fuga="bbb" @click:hoge="() => {}" />
</template>
```
`App.vue`
```html
<script setup lang="ts">
defineProps<{
hoge: string;
}>();
</script>
<template>
<pre>
{{ $attrs }}
</pre>
</template>
```
というコードでブラウザから確認すると以下のようになる。
```json
{
"fuga": "bbb"
}
```
`hoge`は`defineProps`で宣言されているため[[フォールスルー属性 (Vue)|フォールスルー属性]]ではないので表示されないのは期待通り。ただ、`@click:hoge`は`defineEmits`で宣言していないにも関わらず表示されない。
## 原因
ハンドラーなのでrenderされていないだけ。
## 解決方法
`console.log`で出力する実装に変える。
```html
<template>
<pre>
{{ console.log($attrs) }}
</pre>
</template>
```
ちゃんと設定されていることを確認できる。
![[Pasted image 20240428134227.png]]
また、イベントリスナーが設定されているかの判定は以下のように行う。
```html
<template>
<pre>
{{ "onClick:hoge" in $attrs }}
</pre>
</template>
```
これは `true` と表示される。