Vueと共通

【Nuxt.js】slot文法編: スコープ付きスロットを使おう

前置き

スコープ付きスロットのご紹介💫

子から親へデータを渡すことができます✨
基本的にはVuexを使えば良いのですが、
「Vuexを使うほどではないけど
 まとまったdataを子で管理したい!」
そんな時に使います。
公式: スコープ付きスロット

やりたいことイメージするために、
まずはコードを見てもらいましょう👀

⬇️子コンポーネントでdataを管理

⬇️親でdataにアクセスしたい❗️

実際にはこのコードでは動きません💥✋
ただスコープ付きslotにすることで
それが可能になります💫

⬇️以前も簡単に解説していますが、
 今回はもう少し踏み込みます👣
【Nuxt.js】Nuxt文法編:v-slot(中級)

参考:
Vue.jsのslotの機能を初心者にわかるように解説してみた


スコープ付きスロット

デフォルト(名前なしslot)

slotv-bindし…

nameがない=defaultのため
defaultsampleという変数にしています。
これで子コンポーネントのdata
呼び出すことが可能です🌟

表示は
12345@aliz.com
となります。


複数のスロットを使う場合

slotを複数使う場合は
名前付きスロットを使う必要があります。
基本的には全てのslotnameをつけますが、
今回は上のコードで使ったdefault
分かりやすく残しています🍪

表示は
12345@aliz.com cider
となります。


スロットプロパティの分割代入

slotが1つの場合は
template#defaultに名前を指定しなくても
コンポーネントで指定をすることができます。

まぁコードを見た方が早いです👀

SlotItemコンポーネントにv-slot
バインドされたuserをそのまま使用

もしくは別の変数に変換することも可能です💡

表示は
first
となります。


まとめ

いくつもの親で
何回も同じようなdataを入れ込むより
子のdataを使った方が早い!!
という時には便利ですね✨

-Vueと共通
-,

© 2024 aLiz Nuxt