Vueと共通

【Nuxt.js】slot上級編:意外と知らない!slotの便利な使い方

前置き

slot応用編に入れる予定だった
総合まとめが入り切らず
上級編にしました!
slot基礎編、応用編どちらも
クリアした方向けです。
基礎編はこちら。

こんな使い方もできる!

今まで紹介してきたslotは
子でslot、親にテキストでしたが、
今回はちょっと違うパターンです!

こういったモーダルウィンドウ 
いくつも作りたい場合。
テキストの外側の装飾、
いちいち書くのは面倒ですね…!
そして中身も1つ1つ
別のコンポーネントを作りたい、

そんな時の使い方です。

アイコンはiconmonstrさんでお借りしました。
closeで検索、
svgコードを貼り付けて使用しております。
https://iconmonstr.com/

step
1
まずは外側のコンポーネントを作成

(背景の白い部分と閉じるボタン)
中身をslotで自由にデータを表示させます。
slotの使い方が分かれば良いので、
スタイリングは省きます。

) components

step
2
中身のコンポーネントを作成

) components

step
3
親ページでModalTextをModalWrapで囲む

) pages

これだけです!
とっても便利ですよね😄

Vue.jsバージョン 2.6.0での使い方

追加された新機能、 v-slot:を#で省略して書いてます。
使い方自体は一緒です!
省略できるよ、いえーいってだけ。
v-slot: titleなら #title になります。

) components

) pages

結果

まとめ

色々やってきましたが、
超シンプルにまとめます。
slotで改行しなくて良いのですが、
slot部分を強調するため改行しています。

slot1つ

子にslot、親にテキスト

) components

) pages

slot2つ以上

デフォルト1つと、
他にslot nameつける

 親でtemplateでslotを置き換える
 template v-slot:name
 もしくは
 template #name

) components

) pages

子の内容が反映されてしまうケース

 どちらのslotにもslot nameつけたのに
 v-slotしないと子の内容が直接反映されます。

) components

) pages

結果

slotは沢山記事にしましたが、
まとめると超簡単ですよね🤗

-Vueと共通
-,

© 2020 aLiz Nuxt