商品レビューゲーム食レポお問い合わせホームプログラミングJavaScriptVue.jsVue.jsのSlot(スロット)の使い方!(子コンポーネントにコンテンツを渡す)Vue.jsTwitterFacebookはてブPocketLINEコピー2022.04.06Vue.jsのSlotの使い方について書いています。サンプルコードはVue.jsのバージョン3で検証しています。目次Vue.jsのSlotとは?Propsとは違うのか?名前付きSlot(スロット)の使い方デフォルトスロットと名前付きスロットを一緒に使用したいVue.jsのSlotとは?Vue.jsのSlotは子コンポーネントに、使う側の親コンポーネントからコンテンツを渡せるという機能です。実際にSlotを使用する例を書きます。今回はTailwindCSSを使用していい感じにスタイルをつけています。下記のコンポーネントを作成しました。(名前はmy-cardにしました)カード形式で情報を表示するコンポーネントです。Slotでコンテンツを受け取れるようにしています。/>としている箇所に親から渡されたコンテンツが展開されます。親から、このカードを使用するためには下記のように使います。</my-card></template>作成したmy-cardコンポーネントのタグの間に、「カードのコンテンツ」という文字列を渡しています。/>に展開される内容になります。実際にブラウザで作成したカードを表示してみると、下記のように渡された文字列が展開されて表示されました。今回は文字列のみを渡しましたが、下記のようにHTMLを渡すことも可能です。</my-card></template>buttonタグを使用して、ボタンを作ってみました。/>箇所に渡したコンテンツが展開されることが確認できます。Propsとは違うのか?似たような機能として、PropsがありますがPropsは親コンポーネントから文字列や配列などの値を渡すための機能になります。Slotは、先ほどのようにHTMLコンテンツを渡すための機能になります。Propsについては、下記に記事を書いていますので確認してみてください。Vue.js(v3)のpropsの使い方(親から子に値渡し)Vue.jsでpropsを使用して値を受け渡す方法について書いています。Vue.jsのバージョンは3で動作を確認しています。公式のドキュメントも確認して、実際によく使いそうな書き方やハマりそうな箇所について解説しています。先ほどはSlotに渡したコンテンツがひとつでしたが、名前付きSlotを使用することで、コンテンツを複数渡すことが可能です。上記で作成したmy-cardコンポーネントにもうひとつSlotを実装してみます。</div></template>カードのタイトルの箇所もSlotで渡すようにしてみました。/>がタイトルを受け取るためのSlotになります。/>がコンテンツを受け取るためのSlotです。これで、タイトルと内容がSlotを使用して親コンポーネントから渡せるようになります。実際に親コンポーネントから渡す場合は、下記のように使用します。</my-card></template>templateタグを使用して、それぞれのSlotにコンテンツを渡しています。templateタグ自体は表示されることはありません。