【Nuxt.js】Nuxt文法編：v-slot(初級)

前置き

テキストの置き換えができるslot
子コンポーネントにslotを置いて
親で自由に置き換えます✍️

使う場所が多かったり
デザインが凝っていて
いちいちコピペすると
コードが長くなってしまう場合に有効です💕
そもそもコンポーネント化するほどでもない
なんてこともあるので使い所は考えましょう💡

テキスト以外を置き換えたい時は？

propsを使います！
これを使うとCSSも親で書き換えることが可能です✨
基礎編
 応用編
 実践編

v-slot

slotによる置き換え

エラー表示のテキストを作ります。
色やError!の文字は使いまわしたいので、
Error!後ろの文章のみ親で置き換えます🍒

解説

TextError.vue

<slot>LABEL</slot>
今回はpタグを親で自由に変更したいので
pタグの中にslotを入れます。
親で任意のテキストを使わない場合は
子で記載したLABELがそのまま表示されます。

コード

) components

<template>
 <div class="text text-error">
   <strong>Error!</strong>
   <p><slot>LABEL</slot></p>
 </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
 .text-error {
   display: inline-block;
   padding: 4px 8px;
   background-color: #f3beb8;
   border: 1px solid #f09898;
 }
</style>

<strong>Error!</strong>

<p><slot>LABEL</slot></p>

</div>

</template>

export default {

}

</script>

.text-error {

display: inline-block;

padding: 4px 8px;

background-color: #f3beb8;

border: 1px solid #f09898;

}

</style>

) pages

<template>
 <div class="page">
   <TextError>
     // ここに任意のテキスト
     画面遷移時に問題が発生しました！
   </TextError>
 </div>
</template>

<script>
import TextError from '~/components/atom/texts/TextError.vue'

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

// ここに任意のテキスト

画面遷移時に問題が発生しました！

</TextError>

</div>

</template>

import TextError from '~/components/atom/texts/TextError.vue'

export default {

components: {

TextError,

}

</script>

) pages

<template>
 <div class="page">
   <TextError>
     {{ text }}
   </TextError>
 </div>
</template>

<script>
import TextError from '~/components/atom/texts/TextError.vue'

export default {
 components: {
   TextError,
 },
 data () {
  return {
   text: 'ただいまサイトが大変混雑しています！',
  }
 },
}
</script>

</TextError>

</div>

</template>

import TextError from '~/components/atom/texts/TextError.vue'

export default {

components: {

TextError,

data () {

return {

text: 'ただいまサイトが大変混雑しています！',

}

</script>

名前付きスロット

ページタイトルとサブタイトル
それぞれを親で任意のテキストに
変更できるようにしたいです！
slotが2つ必要ですね💡

解説

TitlePage.vue

slot name
slotを複数使う場合は
それぞれにnameをつけます👦👧

index.vue

template v-slot:title
名前付きslotを使う時には
templateタグが必要になります！
v-slot:{slotの名前}で
名前付きslotを指定します。
v-slot:は#で省略できます
<template #title>
　Create!
</template>
nameをつけなかったslotは
defaultという名前を持ちます
<slot>Title</slot>でも
これでテキストの割当が可能です
<template v-slot:default>
　Create!
</template>
h2, pタグは親で指定することも可能です
が！
親でタグを変えることはあまりなく、
共通したタグを
使用することがほとんどです。
子で書いた方が統一感があるため
これはどうしても、という時に使いましょう！
<template v-slot:default>
　<h2>
　　Create!
　</h2>
</template>

コード

) pages

<template>
 <div class="title title-page">
   <h2 class="title">
     <slot name="title">
       Title
     </slot>
   </h2>
   <p class="sub-title">
     <slot name="subtitle">
       Sub Title
     </slot>
   </p>
 </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
 .title-page {
   text-align: center;

   > .title {
     color: #E92323;
   }

   > .sub-title {
     color: #F9C8C8;
   }
 }
</style>

Title

</slot>

</h2>

Sub Title

</slot>

</p>

</div>

</template>

export default {

}

</script>

.title-page {

text-align: center;

> .title {

color: #E92323;

}

> .sub-title {

color: #F9C8C8;

}

</style>

) pages

<template>
 <div class="page">
   <TitlePage>
     <template v-slot:title>
       Create!
     </template>
     <template v-slot:subtitle>
       Create your account
     </template>
   </TitlePage>
 </div>
</template>

<script>
import TitlePage from '~/components/atom/titles/TitlePage.vue'

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

Create!

</template>

Create your account

</template>

</TitlePage>

</div>

</template>

import TitlePage from '~/components/atom/titles/TitlePage.vue'

export default {

components: {

TitlePage,

}

</script>