useAttrs() 透過属性を取得する
最終更新：2026-10-22
useAttrs() 透過属性を取得する
useAttrs() は、props / emits として宣言されていない透過属性（class、id、イベントリスナーなど）を返します。手動で配布するのに使います。
| グループ | テンプレートとヘルパー |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const attrs = useAttrs()
// テンプレート：<div v-bind="attrs"></div>戻り値：リアクティブなオブジェクト（後続の変化には反応しないが、最新値は読める）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The button carries both classes and the data attribute.💡 ポイント
ℹ️ 補足 props を宣言していないとき、透過属性はデフォルトで自動的にルート要素に落ちます。内部の非ルート要素に落としたいときにこのフックを使います。
⚠️ 注意 attrs を変更しようとしないでください。読み取り専用なので、変更は警告が出るだけで反映されません。
💡 ヒント inheritAttrs: false と組み合わせます。自動透過をオフにしてから、手動で正確に配布します。
🏷️ 関連テンプレートとヘルパー
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q $attrs との違いは？
A Composition API 版で機能は同じです。$attrs はテンプレート / インスタンス上の書き方です。
Q attrs は親コンポーネントに合わせて更新されますか？
A 最新の値は同期されますが、オブジェクト自体は深くリアクティブではありません（内部の値は依存追跡をトリガーしません）。
Q 手動での配布が必要なのはどんなときですか？
A コンポーネントに複数のルート要素があるとき、または特定の内部要素に属性を置きたいときです。
