Vueと共通

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

前置き

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

) pages


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

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

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

構成

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

Let's try!

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

) pages

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

ticktack…


答え

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

) components

) pages

Point!

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

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

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

-Vueと共通
-,

© 2020 aLiz Nuxt