Vue.js の slot と props
内容としては これ (Vue.js のガイドの「スロット」の「スコープ付きスロット」) を読んで理解できなかった自分向けのメモです。
Vue.js で slot を使ったコンポーネントの持つ値を、slot に差し込まれるコンポーネントに props として渡す方法を調べました。
slot を使ったコンポーネントを Hoge コンポーネント、差し込むコンポーネントを Fuga コンポーネントとすると、以下の感じでいけます。
Hoge コンポーネントで slot の部分に <slot :hoge="hoge" /> みたいに渡したい値書いて、実際このコンポーネントを使うときに
<Hoge v-slot="{ hoge }">
<Fuga :fuga="hoge" />
</Hoge>
のように v-slot という構文で hoge を取り出して子のコンポーネントに props として渡してあげればいけます。
要するに slot タグに露出させたい属性値書いておけば v-slot で取り出せる感じ。
サンプル
登場するコンポーネントは 3 つで、
- blur コンポーネント (slot タグを含むコンポーネント): クリックされるまで子コンポーネントをボヤかす
- spark コンポーネント (差し込まれるコンポーネント): props の
isSparkingが true になると点滅するコンポーネント - app コンポーネント (ルートコンポーネント。上記二つを実際に組み合わせる)
になります。
blur コンポーネントがクリックされたことを、spark コンポーネントに伝え、点滅を開始してもらうという動作になります。
See the Pen Vue Slot Props by ushumpei (@ushumpei) on CodePen.
実用的では無い例です。自分が実際にこれを必要としたのは、タブのコンポーネントで、タブがアクティブになったら子コンポーネントに伝えてデータフェッチし直す、的なやつです。
