inheritAttrs 属性の透過制御
最終更新：2026-10-22
inheritAttrs 属性の透過制御
inheritAttrs: false にすると、未宣言の属性がルート要素へ自動的に付かなくなり、正確に転送できるようになります。
| グループ | オプション: 合成とその他 |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
inheritAttrs: false,
template: "<div><input v-bind=\"$attrs\"></div>"
}⚙️ 引数
| value | ブール値（デフォルトは true） |
|---|
戻り値：戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The placeholder and class land on the real input.💡 ポイント
💡 ヒント ラッパーコンポーネントでは透過を無効化して $attrs を再バインドするのが一般的です。
ℹ️ 補足 複数ルートのコンポーネントは決して自動転送しないため、手動でバインドしてください。
🏷️ 関連合成とその他
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q ルートに奇妙な属性が付くのはなぜですか？
A 未宣言属性のデフォルトの透過によるものです。
Q 複数ルートのコンポーネントでは設定が必要ですか？
A 不要ですが、$attrs を手動でバインドしないと属性が失われます。
Q class も対象ですか？
A はい。class と style はマージされます。
