render関数による動的コンポーネント
型によるコンポーネントの切り替え、コンポーネントの解決、render関数でのスロット維持
「render関数による動的コンポーネント」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
レンダー関数での動的コンポーネント
テンプレートでは<component :is="...">を使って、実行時にコンポーネントを切り替えます。レンダー関数では、resolveヘルパーとhを使って同じことを実現できます。
resolveComponent
resolveComponentは、登録名によってグローバルまたはローカルに登録されたコンポーネントを検索し、hで使用できる形で返します。
import { h, resolveComponent } from "vue";
export default {
render() {
const Btn = resolveComponent("MyButton");
return h(Btn, null, () => "Click");
}
};resolveDynamicComponent
対象が登録名、HTMLタグ、またはコンポーネントオブジェクトのいずれかになり得る場合は、resolveDynamicComponentを使います。この関数が3つのケースをすべて処理します。
import { h, resolveDynamicComponent } from "vue";
h(resolveDynamicComponent(props.type));Propsでtypeを指定する
コンポーネント名をprops経由で渡し、レンダーのたびに解決します。これは:isに相当するレンダー関数の書き方です。
export default {
props: { type: String },
render() {
const Comp = resolveDynamicComponent(this.type);
return h(Comp, { msg: "hi" });
}
};Propsを引き継ぐ
受け取ったattrsを解決済みのコンポーネントにスプレッドし、動的な子コンポーネントが親に渡されたすべての情報を受け取れるようにします。
setup(props, { attrs }) {
return () => h(
resolveDynamicComponent(props.type),
{ ...attrs }
);
}スロットを引き継ぐ
スロットはhの3番目の引数を通じて子コンポーネントに渡されます。親のslotsオブジェクトを直接渡すと、動的なコンポーネントでスロットがレンダーされます。
setup(props, { slots }) {
return () => h(
resolveDynamicComponent(props.type),
null,
slots
);
}再利用可能なレンダラー
attrsとslotsの引き継ぎを組み合わせると、すべてを透過的に渡しながら名前で任意のコンポーネントをレンダーする薄いラッパーになります。
setup(props, { attrs, slots }) {
return () => h(
resolveDynamicComponent(props.is),
attrs,
slots
);
}動的な列レンダラー
データテーブルでは、各列に独自のレンダラーコンポーネントを指定できることがよくあります。列ごとにコンポーネント名を保持し、各セルで解決します。
const columns = [
{ field: "name", renderer: "TextCell" },
{ field: "price", renderer: "MoneyCell" }
];セルを動的にレンダーする
各列についてレンダラーを解決し、セルの値をpropsとして渡します。1つのループで、種類の異なるセルを処理できます。
render() {
return h("tr", null,
columns.map((col) =>
h("td", null, [
h(resolveDynamicComponent(col.renderer), {
value: this.row[col.field]
})
])
)
);
}タグへのフォールバック
resolveDynamicComponentに未登録の名前を渡すと、ネイティブ要素の文字列として扱われるため、"div"は実際のdiv要素として安全にレンダーされます。
h(resolveDynamicComponent("div"), { class: "box" }, "fallback");ここでレンダー関数を使う理由
構造が計算によって決まる場合、つまり子要素の数が可変、項目ごとにコンポーネントの種類が異なる、またはテンプレートで何重もの条件分岐が必要になるロジックの場合に、レンダー関数が力を発揮します。
理解度チェック
コンポーネント名またはネイティブHTMLタグの可能性がある対象を安全に解決するヘルパーはどれですか？
まとめ
登録名にはresolveComponentを使い、対象がHTMLタグやコンポーネントオブジェクトになる可能性がある場合はresolveDynamicComponentを使います。attrsをpropsとして引き継ぎ、slotsオブジェクトをhの3番目の引数として渡します。このパターンは、動的なテーブル列レンダラーや柔軟なラッパーに利用できます。
よくある質問
「render関数による動的コンポーネント」レッスンは無料ですか？
はい。「render関数による動的コンポーネント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「render関数による動的コンポーネント」で何を学びますか？
型によるコンポーネントの切り替え、コンポーネントの解決、render関数でのスロット維持 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「render関数による動的コンポーネント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- h()関数を深く理解する
- ViteでのVue 3 JSX
- render関数による動的コンポーネント
- 高階コンポーネント（HOC）パターン