JavaScript

Vueでslotを使ってSPAを効率的に開発する【slot便利】

課題を持った人
課題を持った人
Vue.jsのコンポーネントにslotという機能があることを知りました。slotの使い方を教えてください。

こんな要望にお答えします。

僕は最近よく仕事でVue.jsを触っていますので、信頼いただける情報かなと思います。

この記事は以下の環境で動作確認しました。

Vueプロジェクトの開発環境が整っていない方は、「Vue CLIを使った開発環境構築方法」で環境構築後に読み進めてください。

slotについて

Vue.jsのコンポーネントでは、基本的に開始タグと終了タグの間のコンテンツは無視されてレンダリングされます。以下のMyComponent要素の間に書かれた「こんにちは」という文字は無視されます。

<MyComponent>こんにちは</MyComponent>

つぎの例をご確認ください。

/src/components/MyButton.vueを作ります。

/src/views/About.vueをつぎのとおり編集します。

Aboutページの表示はつぎのようになります。

Vue.jsのコンポーネントでは、基本的に開始タグと終了タグの間のコンテンツは無視されてレンダリングされることを証明するために、/src/views/About.vueをつぎのとおり編集します。

ボタンのOKという文字をCancelに変えることが狙いだったのですが適用されませんでした。開始タグと終了タグの間のコンテンツは無視されることが確認できました。

では、ボタンのOKをCancelという文字に変更するにはどうしたらいいでしょうか。

ここで、slotが登場します。

/src/components/MyButton.vueをつぎのとおり編集してみましょう。

今度はボタンの文字がCancelに変わりました。

このように、コンポーネント外からコンテンツを受け付ける仕組みがslotです。今回の例のボタンのように外からコンテンツを受け付けたほうが再利用性が高まる場合は、slotの利用をおすすめします。

名前付きslotについて

slotに名前を付けることでコンポーネント内で複数のslotを使うことができます。実際に使ってみましょう。

/src/components/Book.vueを新規作成します。

titleという名前のslotとsummaryという名前のslotを設定しています。

/src/views/Home.vueをつぎのように編集して名前付きslotを使ってみましょう。

つぎのような画面が表示されましたか?

名前付きslotはtemplate要素に「slot=”title”」などと指定することで使用することができます。

または、「<p slot=”title”>銀河鉄道の夜 / 宮沢賢治</p>」のように要素に直接指定する方法もあります。

slotの注意点

slotを使用する際の注意点があります。

スロット内でデータバインディングを使った場合は、コンポーネントを使ったテンプレート内のデータがバインディングされます。

試しに、先ほど使った/src/components/MyButton.vueをつぎのように編集してみましょう。

scriptブロック内でdataプロパティを定義しています。dataプロパティにはbuttonというキーを定義しています。buttonの値はStopという文字列です。

つぎに、/src/views/About.vueを編集します。

templateブロックとscriptブロックに追加します。こちらのscriptブロックのdataプロパティにも先ほどと同名のbuttonというキーを登録しています。値はStartという文字列です。

さあ、{{ button }}にはStartとStopどちらの文字が表示されるでしょうか?

Startが表示されました。最初に書いたとおり、スロット内でデータバインディングを使った場合は、コンポーネントを使ったテンプレート内のデータがバインディングされることが証明されました。

筆者
筆者
以上、slotについて解説しました。slotをうまく使って効率的にWebアプリを構築していきましょう!