Vueと共通

【Nuxt.js】slot基礎編:コンポーネントの一部を置き換えよう

前置き

Nuxt.jsと言えばコンポーネント🌟
componentの内容を、
ページによって少しだけ変えたい!
そんな時に便利なslotです💕

実践をしたい方はこちら


slotって?メリットは?

ウェブサイトを作ってて、
「同じコードをコピペしまくって面倒〜
 コンポーネントにしたいけど
 ページによって文字とか変えたい…」
って時、ありますよね?
slotならできるんです🌟

コンポーネントが使えないから、
基本のコードコピペして中身だけ編集する…
なんて面倒なことをしなくていいんです!
コンポーネントにしちゃって、
一部だけ置き換えれば良いんです!
楽ちん!!


slotを使わない場合

じゃあコンポーネントを使って…
親コンポーネントで中身を変えよう!
slotなくても
<Component></Component>の中身に書けばよくない?
と思ったそこのアナタ!
こちらをご覧ください。


slotを書かなかった場合

) components

) pages

Hello Nuxt.js!
これが表示されればOKなのですが
表示はご覧の通りです。
親のことは完全なシカトです。ツライ。。。


表示

画像

slotの使い方(超簡単ver.)

そこでslot君の登場です!!
使い方は超〜〜〜簡単。
子コンポーネント内に変えたい部分をslotにするだけ。
上の説明に使ったコードでやってみます。

) components

<slot />

<slot></slot>をまとめた書き方です。
他のタグでも同様です!

) pages

これだけで表示結果が変わる!!
slotくんに呼びかけて、ちゃんとデータを表示してくれます。
偉いぞslotくん!!!


表示

画像

slotの使い方(複数ver.)

便利なslotくん
「じゃあいっぱいslot使おう!
 h1とh2にも使おう〜」
って場合は
各slotに名前をつけてあげる必要があります。

「これ表示して?」って言われても、
名前で呼んでくれないと、
どのslotくんが表示すればいいのか
分からなくなっちゃいますよね。

そういう先輩いません?
「これやっといて〜」って、
今誰に言ったの?😯
私やるの???
え、誰???🙄
みたいな。

なので、
もし名前をつけないでslotを2つ用意すると
親に入れたものが2回表示されます。
「はいはい、私やりますね」
って2人反応しちゃいます。

名前で呼ばなかった先輩はきっと
同じ仕事を無駄に2個させたことを後悔するでしょう。
こんなにいらんわ。。。って。

) components

) pages


表示

画像

slotの使い方(実践ver.)

ということで各slotくんに
名前をつけてあげましょう。
「◯◯くん、これ表示しといてよ」
って言ってくれたら
はい、私ですね!表示しますね!✨🙋‍♀️
ってなりますよね。

ここで1つ注意。
名前をつける場合は、
親で<template>タグで囲う必要があります。
これさえできればもう完璧。

) components

) pages


表示

おめでとうございます!🎉
これでslotが使えますね!
ぜひslot実践編をチャレンジしてみてください🔥💪

-Vueと共通
-,

© 2020 aLiz Nuxt