Vue.jsのslot機能

Props機能との違い

Propsは親から子へ文字列や数字などの値を渡す機能

スコープ付きスロットを使った場合はデータも渡せる

slotとは親となるコンポーネント側から、子のコンポーネントのテンプレートの一部を差し込む機能 です。

親コンポーネントからデータを受け取って子コンポーネントで表示を切り分けしたい時に使う？

親からslotに対応する項目が何も渡されなかった場合は、子のslot要素で記述されている内容がデフォルトで使用される

記事最後では、スコープ付きslotを使って子から親にデータを受け取る例の活用例がある

スコープ付きslot で 子 -> 親に渡せる

公式ページ

v.2.6.0 で v-slot ディレクティブが追加され、古い slot および slot-scope 属性は非推奨となっている

v-on や v-bind と同様に v-slot にも省略記法があり、引数の前のすべての部分 (v-slot:) を特別な記号 # で置き換えます。例えば、v-slot:header は # header に書き換えることができます:

初心者殺し & 検索殺し & Scrapbox 殺しの記法きた

シンプルに列挙されててわかりやすい