
前提 この記事はこんな方におすすめ
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 | ○ | ○ | ○ | × |