Vueと共通

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

前置き

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

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

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

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


v-slot

slotによる置き換え

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

directory

components/
--| atom/
----| texts/
-----| TextError.vue

pages/
--| index.vue
--| sample.vue

アトミックデザイン

コンポーネントは
アトミックデザインに基づいて作成しています!
要素の大きさごとにファイルを分けます🙋‍♀️
コンポーネントがどこにあるのか
分かりやすくなります💕
大きさの分類はここが参考になります!
Atomic Designとは

解説

TextError.vue

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

コード

) components

) pages

) pages


名前付きスロット

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

directory

components/
--| atom/
----| titles/
-----| TitlePage.vue

pages/
--| index.vue

解説

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

) pages

-Vueと共通
-,

© 2020 aLiz Nuxt