コンポーネントを動的に切り替える<component>要素 [Vue.js]

Vue.js The Progressive JavaScript Framework

Vue.jsには、コンポーネントを制御するためのコンポーネントのメタコンポーネントの組み込みコンポーネントが用意されています。

今回は、コンポーネントを動的に切り替える組み込みコンポーネントの<component>要素について紹介します。

動的コンポーネント

動的なコンポーネントとは、ユーザーの操作やアプリケーションの状態によって、コンポーネントを切り替える仕組みです。
動的コンポーネントを使用すると、例えばタブ付きのインターフェースを持つアプリケーションで、タブがクリックされた時にタブページに表示されるコンポーネントを切り替えることができます。

<component>要素

<component>要素は、コンポーネントのコンテナとして動作します。
<component>要素はコンポーネントの入れ物として動作し、あらかじめ用意されているコンポーネントをインポートすることで、動的な切り替えを可能にします。

サンプルのコンポーネント

ここでは、タブページを持つUIを例に<component>要素を使用してコンポーネントを切り替えます。

動的コンポーネントの例に使用するタブを持つUIのコンポーネント

タブページに配置するコンポーネント(インポートするコンポーネント)

タブがクリックされた時に、タブページに配置するコンポーネント(タブに対応するコンポーネント)は次のようにします。

ホームタブのコンポーネント

リファレンスタブのコンポーネント

ドキュメントタブのコンポーネント

タブがクリックされると、上記の3つのコンポーネントのうちのいずれかがインポートされます。
上記のコードはJavaScript側のスクリプトに実装します。

コンポーネントを呼び出すアプリケーション

用意した3つのコンポーネントを呼び出し、切り替えて表示するための呼び出し側のアプリケーションのコードを実装します。

HTML

HTMLのテンプレートにはアプリケーションのルートとなるdiv要素を配置します。
div要素の中にタブとなるボタン(button要素)を配置します。タブのボタンはv-forディレクティブを使用して描画します。
タブとなるボタンの下にタブページとなるコンポーネントを配置します。
ここでcomponent要素を使用します。component要素の属性の「is」にv-bindディレクティブを使用してインポートするコンポーネントの名前を指定します。ここで指定している「currentTabComponent」は、JavaScript側に記述するVueインスタンスのcomputedプロパティオプションに定義するデータになります。
component要素を配置した部分がコンポーネントの表示領域となり、is属性で指定した名前が表示すべきコンポーネントになります。currentTabComponentの値が切り替わることで、表示するコンポーネントが動的に切り替わります。

CSS

CSSにはタブ(のボタン)とタブページを表現するスタイルを定義します。

JavaScript

JavaScript(スクリプトのプログラム)にはVueのインスタンスを定義します。
Vueインスタンスにはdataプロパティオプションとcomputedプロパティオプションを定義します。
dataにはカレントタブ(現在のタブ)の「currentTab」と、タブの情報を持つオブジェクトの「tabs」を定義します。
computedオプションには、HTMLテンプレートところで触れたコンポーネントの名前を返す関数を定義します。

上記の実装コードをブラウザーで実行(表示)すると、冒頭に掲載した画像のイメージの画面が表示されます。

タブのボタンをクリックすることで、タブページに表示されるコンポーネントが切り替わります。
「ホーム」タブがクリックされた時は「ホームのコンポーネントのコンテンツ」というテキストが表示され、「リファレンス」タブがクリックされた時は「リファレンスのコンポーネントのコンテンツ」というテキストが表示され、「ドキュメント」タブがクリックされた時は「ドキュメントのコンポーネントのコンテンツ」というテキストが表示されることが確認できます。

ホームタブをクリック

動的コンポーネントの例のサンプルのホームタブ

リファレンスタブをクリック

動的コンポーネントの例のサンプルのリファレンスタブ

ドキュメントタブをクリック

動的コンポーネントの例のサンプルのドキュメントタブ

Vue.js 入門 Tips 一覧