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

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	○	○	○	×