<component> 動的コンポーネント

最終更新：2026-10-22

はデータに応じて描画するコンポーネントやネイティブ要素を動的に切り替えます。タブやルータービューの背後にある仕組みです。

📝 構文

<component :is="currentView"></component>

<!-- ネイティブタグも描画できる -->
<component is="h3">動的タグ</component>

props	is（コンポーネント名、コンポーネント定義オブジェクト、またはネイティブタグ名の文字列）

以下のコードを編集して結果を確認しましょう：

出力：

Clicking switches between 'Component A' and 'Component B'.

💡 ヒント よくある形：タブの切り替え、型に応じた異なるフォームフィールドの描画。

ℹ️ 補足 切り替えると旧コンポーネントは破棄されます（状態が失われます）。状態を残したいときはで包んでください。

⚠️ 注意 is の値が未登録のコンポーネントを指す場合、Vue はネイティブタグとして描画し、警告が出ることもあります。

Q v-if の分岐との違いは？

A 結果は似ていますが、動的コンポーネントはデータ駆動で、ケースごとの分岐コードを書かずに済みます。

Q props を渡せますか？

A 渡せます。<component :is="view" :data="payload"> のように書くと、属性は選ばれたコンポーネントへ透過されます。

Q is に定義を直接書けますか？

A 書けます。:is="MyComponent" のようにコンポーネント定義オブジェクトを渡せば、完全に動的な場面にも対応できます。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。