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

前置き

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

実践をしたい方はこちら

【Nuxt.js】slot実践編：コンポーネントの一部を置き換えよう

slotって？メリットは？

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

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

slotを使わない場合

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

slotを書かなかった場合

) components

<template>
  <h1 class="title">ここは親ページによってタイトルを変えたい</h1>
</template>

<script>
export default {
}
</script>

<h1 class="title">ここは親ページによってタイトルを変えたい</h1>

</template>

export default {

}

</script>

) pages

<template>
 <div class="page">
  <Title> Hello Nuxt.js! </Title>
 </div>
</template>

<script>
import Title from '~/components/Title.vue' 

export default {
 components: {
  Title, 
 }, 
} 
</script>

<Title> Hello Nuxt.js! </Title>

</div>

</template>

import Title from '~/components/Title.vue'

export default {

components: {

Title,

}

</script>

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

表示

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

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

) components

<template>
 <h1 class="title">
  <slot />// ここは親ページによってタイトルを変えたい
 </h1>
</template> 

<script>
export default {
}
</script>

<slot />// ここは親ページによってタイトルを変えたい

</h1>

</template>

export default {

}

</script>

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

) pages

<template>
 <div class="page">
  <Title> Hello Nuxt.js! </Title>
 </div>
</template>

<script>
import Title from '~/components/Title.vue' 

export default {
 components: {
  Title, 
 }, 
} 
</script>

<Title> Hello Nuxt.js! </Title>

</div>

</template>

import Title from '~/components/Title.vue'

export default {

components: {

Title,

}

</script>

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

表示

slotの使い方(複数ver.)

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

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

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

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

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

) components

<template>
  <div class="title">
    <h1>
      <!-- ここは親ページによってタイトルを変えたい -->
      <slot />
    </h1>
    <h2>
      <slot />
    </h2>
  </div>
</template>

<script>
export default {
}
</script>

<h1>

</h1>

<h2>

</h2>

</div>

</template>

export default {

}

</script>

) pages

<template>
  <div class="page">
    <Title>
      Hello Nuxt.js!
      about slot
    </Title>
  </div>
</template>

<script>
import Title from '~/components/Title.vue'

export default {
  components: {
    Title,
  },
}
</script>

<Title>

Hello Nuxt.js!

about slot

</Title>

</div>

</template>

import Title from '~/components/Title.vue'

export default {

components: {

Title,

}

</script>

表示

slotの使い方(実践ver.)

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

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

) components

<template>
  <div class="title">
    <h1>
      <!-- ここは親ページによってタイトルを変えたい -->
      <slot name="title" />
    </h1>
    <h2>
      <slot name="catchCopy" />
    </h2>
  </div>
</template>

<script>
export default {
}
</script>

<h1>

</h1>

<h2>

</h2>

</div>

</template>

export default {

}

</script>

) pages

<template>
  <div class="page">
    <Title>
       <template v-slot:title>
         Hello Vue.js! // slot name="title"を置き換える
       </template>
       <template v-slot:catchCopy>
         about slot // slot name="catchCopy"を置き換える
       </template>
    </Title>
  </div>
</template>

<script>
import Title from '~/components/Title.vue'

export default {
  components: {
    Title,
  },
}
</script>

<Title>

Hello Vue.js! // slot name="title"を置き換える

</template>

about slot // slot name="catchCopy"を置き換える

</template>

</Title>

</div>

</template>

import Title from '~/components/Title.vue'

export default {

components: {

Title,

}

</script>

表示

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