開発

【Vue.js】slotの使い方にピンと来なかった者によるSlotとpropsの整理

作成日: 2022年1月7日

前提 この記事はこんな方におすすめ

Vue.jsの初心者がチュートリアルや参考書で学び進める中で出会う概念が「slot」

https://v3.ja.vuejs.org/guide/component-slots.html#スロットコンテンツ

ですが、使い方がいまいちピンと来ず、propsだけでなんとかしてきた人に向けた初歩的な記事です。

コンポーネント指向とpropsという仕組み

前提としてVue.jsはコンポーネント指向で、UIを構造化してサイト構築できます。 コンポーネント指向でサイトを構築する場合、「コンポーネントに対して外から情報を与える場面」が多々あるかと思います。Vue.jsではこの解決方法が用意されています。

解決方法1 props

propsでは「コンポーネントに対して外から情報を与える」ことができます。 https://v3.ja.vuejs.org/guide/component-basics.html#プロパティを用いた子コンポーネントへのデータの受け渡し

props オプションを用いて子コンポーネント上でプロパティを登録し、親コンポーネントからカスタム属性としてデータを渡します。このようにpropsを使うことで「コンポーネントに対して外から情報を与える」ことができます。 ではslotの存在意義は一体何なのでしょうか?

解決方法2 slot

slotでも「コンポーネントに対して外から情報を与える」ことができます。前述のpropsとの違いは、与えることができる「情報」です。slotでは「情報」として「テンプレートコード」も含めることが出来ます。テンプレートコードとはHTMLやコンポーネントです。propsではこれを含めることはできません。

まとめ

ここまでの内容を整理すると以下の通りです。

  • どちらもコンポーネントに対して外から情報を与える方法として使えます。
  • テンプレートコードを与える場合、propsでは出来ませんのでslotを使います
  • 型検査を行う場合、slotでは出来ませんのでpropsを使います
文字列テンプレートコードデータ型検査
props×
slot×