components 子コンポーネントの登録
最終更新：2026-10-22
components 子コンポーネントの登録
components オプションは子コンポーネントをローカル登録し、このコンポーネント内にスコープを限定します。
| グループ | オプション: 合成とその他 |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
components: { TodoItem }
}⚙️ 引数
| value | 名前（kebab-case も可）から定義へのマッピングのオブジェクト |
|---|
戻り値：戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Renders two todo items.💡 ポイント
💡 ヒント ローカル登録を優先してください。依存が明確で tree-shaking にも有利です。
ℹ️ 補足 DOM 内テンプレートでは kebab-case の名前で登録してください。
⚠️ 注意 グローバル登録はどこでも使える代わりに肥大化するため、少数の基本コンポーネントに留めます。
🏷️ 関連合成とその他
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q グローバル登録との違いは？
A ローカルはスコープが限られ tree-shaking 可能です。グローバルはどこでも使えますが冗長です。
Q 名前は kebab-case でなければなりませんか？
A DOM テンプレートでは必須です。SFC なら両方受け付けます。
Q 登録は動的にできますか？
A まれです。動的な切り替えは <component :is> を推奨します。
