Vueと共通

【Nuxt.js】$slotsを使ってみよう

前置き

あまり見かけない$slotsのご紹介🌟

$slotsはVue公式の
render関数で使用されています。

vm.$slots のアクセスは、描画関数 によるコンポーネントを書くときに最も便利です。

vm.$slots

ただrender関数はNuxtでやるのは
結構むずかしいです💥
なのでrender関数を使用しない
実用的な$slotsの使用例をご紹介します。

同時にrender関数については
何をしたい時に使うか、
そしてNG例をご紹介します。

参考:
描画関数とJSX
【Vue.js】コンポーネントのtemplateの書き方まとめ


$slots

vm.$slots
デフォルトとエラー時などで
表示を切り替えたい際に便利です✨
見てもらった方が早いと思います👀

スロットを複数使う場合は
名前付きにしていました。
ただslotの状態によって
表示/非表示をv-if
切り替えることはできませんでした💡
それが$slotsを使えばできるんです🍀

⬇️スコープ付きスロットなどは
 こちらをご覧ください👀
【Nuxt.js】slot文法編: スコープ付きスロットを使おう


描写(render)関数

前置きでも書きましたが、
Nuxtでこれを使うのは
結構むずかしいです💥

できること、NG例を
ご紹介します。

公式のコードをNuxtに置き換えます。
levelというpropsによって
h1h6のどれを表示させるか…
コードはこうなります。
長いし、slotが重複してしまいます。
これを省略できるのがrender関数です。

親でlevelを指定
h4を表示させたいので4を指定


NG例①Vue公式をコピペ

描画関数とJSX
こちらのrender関数をコピペしても
Nuxtでは動きません。


NG例②

Nuxt render function for a string of HTML that contains Vue components
こちらを参考にやってみます。
templateなので
hタグの入れ子にslotは入らなそうなのと、
そもそも動きません。

じゃあ使うためにはどうするか、
今のところJSXを
使うしかなさそうです。


まとめ

$slotsrender関数内だけでなく
使用ができて便利ですね🌟

-Vueと共通
-,

© 2021 aLiz Nuxt