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

前置き

slotを使った実践・応用編です👏

いやいや、基礎が知りたいの😡
という方は基礎編をどうぞ！

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

slotを使おう！実践・応用編

では、ここからは
実際にコードを書いてみましょう。
作る物はこちら！

アイコンはICOON MONOさんでお借りしております。
callとmailで検索すればヒットします。
https://icooon-mono.com/

構成

お問い合わせページで
電話かメールかを選択していただき、
それぞれの詳細ページに飛ぶようなボタンを作ります。
・画像(imgもしくはsvgが入る)とpが入ったシンプルなボタン。
・ボタンは幅によって可変に。
・余白や幅の値など、スタイリングは大体で良いです。
・リンク先は記載しなくて良いです。
　やりたい方は次の #slotを使おう！実践・応用編+α へどうぞ
・slotを使って見た目が出来ていればOK！

Let's try!

CSSも勉強中の方は
ごちゃつかないように
まずは自分がやりたいことを優先してください🌟
スタイリングは先でも後でも良いです。
まずは作る楽しさを知りましょう🎶🤗

ticktack…

できましたか？
答えはこちら！！
スタイリングはscssで記載してますが、
通常のcssでももちろんOKです！

scss

入れ子にした書き方ができます！
構造が把握しやすくなるので便利です💕

答え

) components

<template>
 <button class="button-default">
   <slot />
   <p>
     <slot name="label" />
   </p>
 </button>
</template>

<script>
 export default { }
</script>

<style lang="scss" scoped>
 .button-default {
   cursor: pointer;
   display: block;
   text-align: center;
   height: 150px;
   border-radius: 8px;
   border: 1px solid #dddddd;

   &:hover {
     transform: scale(1.04);
     transition-duration: 40ms;
   }

   > p {
     margin-top: 20px;
     font-family: 'Noto Sans CJK JP';
     font-size: 20px;
     letter-spacing: 0.1em;
   }
 }
</style>

<p>

</p>

</button>

</template>

export default { }

</script>

.button-default {

cursor: pointer;

display: block;

text-align: center;

height: 150px;

border-radius: 8px;

border: 1px solid #dddddd;

&:hover {

transform: scale(1.04);

transition-duration: 40ms;

}

> p {

margin-top: 20px;

font-family: 'Noto Sans CJK JP';

font-size: 20px;

letter-spacing: 0.1em;

}

</style>

) pages

<template>
 <div class="page">
   <div class="buttons">
     <ButtonDefault class="button">
       <img class="img" src="/callcenter.png" alt="">
       <template v-slot:label>
         お電話でのお問い合わせ
       </template>
     </ButtonDefault>
     <ButtonDefault class="button">
       <img src="/mail.png" alt="">
       <template v-slot:label>
         メールでのお問い合わせ
       </template>
     </ButtonDefault>
   </div>
 </div>
</template>

<script>
import ButtonDefault from '~/components/Buttons/ButtonDefault.vue'

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

<style lang="scss" scoped>
 .page {
   padding: 20px;
   > .buttons {
     display: flex;
     justify-content: space-between;
     > .button {
       width: calc(50% - 11px);
       > img {
        with: 36px;
       }
     }
   }
 }
</style>

お電話でのお問い合わせ

</template>

</ButtonDefault>

メールでのお問い合わせ

</template>

</ButtonDefault>

</div>

</template>

import ButtonDefault from '~/components/Buttons/ButtonDefault.vue'

export default {

components: {

ButtonDefault,

}

</script>

.page {

padding: 20px;

> .buttons {

display: flex;

justify-content: space-between;

> .button {

width: calc(50% - 11px);

> img {

with: 36px;

}

</style>

画像slotをsvgなどで囲まない
imgかsvgどちらでも使えるようにしたいので、
画像は親で指定します
＝スタイリングは親で行う
＝どうしても子で書く場合はdivで囲む
slot nameを使う場合、それぞれにつけなくても良い
2つslotがあれば、
片方のみnameをつければ区別ができます！
ただ分かりやすく個別につける方が⭕
親ではtemplate v-slot: で指定
ボタン同士の余白など、配置は親で指定

できましたか？🤩
これでslotには慣れましたね🎉
+α ぜひチャレンジしてください！

slotを使おう！実践・応用編 +α

構成

slot利用
リンク先追加ver.
nuxt-linkや$attrsを使用
ディレクトリの構造はファイル名は下記とします。

components/
--| Buttons/
-----| ButtonDefault.vue

pages/
--| index.vue

components/

--| Buttons/

-----| ButtonDefault.vue

pages/

--| index.vue

Let's try!

コンポーネント自体にnuxt-linkつける…？
こうかな…？

) pages

<template>
  <nuxt-link to="/contact/call">
    <ButtonDefault>
      <img class="img" src="/callcenter.png" alt="">
      <template v-slot:label>
        お電話でのお問い合わせ
      </template>
    </ButtonDefault>
  </nuxt-link>
</template>

<script>
import ButtonDefault from '~/components/Buttons/ButtonDefault.vue';

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

<nuxt-link to="/contact/call">

お電話でのお問い合わせ

</template>

</ButtonDefault>

</nuxt-link>

</template>

import ButtonDefault from '~/components/Buttons/ButtonDefault.vue';

export default {

components: {

ButtonDefault,

}

</script>

これはダメなんです…！🙅‍♀️

ticktack…

答え

さぁ答えを見てみましょう！
スタイリングなどは同じのため、
template内のみ記載します！

) components

<template>
 <nuxt-link
  v-bind="$attrs"
  class="button-default"
 >
   <slot />
   <p>
     <slot name="label" />
   </p>
 </nuxt-link>
</template>

<script>
export default {
}
</script>

<nuxt-link

v-bind="$attrs"

class="button-default"

<p>

</p>

</nuxt-link>

</template>

export default {

}

</script>

) pages

<template>
 <div class="page">
   <div class="buttons">
     <ButtonDefault to="/contact/call" class="button">
       <img class="img" src="/callcenter.png" alt="">
       <template v-slot:label>
         お電話でのお問い合わせ
       </template>
     </ButtonDefault>
     <ButtonDefault to="/contact/mail" class="button">
       <img src="/mail.png" alt="">
       <template v-slot:label>
         メールでのお問い合わせ
       </template>
     </ButtonDefault>
   </div>
 </div>
</template>

<script>
import ButtonDefault from '~/components/Buttons/ButtonDefault.vue';

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

お電話でのお問い合わせ

</template>

</ButtonDefault>

メールでのお問い合わせ

</template>

</ButtonDefault>

</div>

</template>

import ButtonDefault from '~/components/Buttons/ButtonDefault.vue';

export default {

components: {

ButtonDefault,

}

</script>

Point!

子でbuttonタグをnuxt-linkにする
リンク先を$attrsにし、親で遷移先を自由に指定する
親で読み込んだコンポーネントに遷移先を指定
to="/contact/call" の部分

読み込んだコンポーネントに
直接nuxt-linkを指定する方法が
検索してもなかなか出てきませんでした。。。
でもこれで大丈夫！

いかがでしたか？😀
これであなたも今日からslotマスターです✨🏀🧢