Vueと共通

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

初級はこちら!


v-slot


分割代入

簡単にいうと別の場所で
別の変数をきめれて
値を代入できること💡
MDN分割代入

というより見た方が早いですね👀
親で子の値を使えちゃいます!

どんな時に使うの?

まとまったdataを子で管理したい時に使います!

コード

) components

) pages


動的なスロット名

動的引数

まずは動的引数を理解しましょう💡
https://jp.vuejs.org/v2/guide/syntax.html#動的引数

解説

<a :[attributeName]="url"> リンク </a>
これと全く同じです❗️
<a :href="url">リンク</a>

コード

) components

) pages


v-bind="$attrs"

では今度はslotで…
できるのですが、
簡単な方法があります!笑

解説

属性自体を親から渡したい時
v-bind="$attrs"を使います💡
今回の場合はaタグの
href属性ごと渡してます。

コード

) components

) pages


まとめ

置き換えのできる3つをまとめました!

  • slot:テキストの置き換え
  • props:それ以外の置き換え、クラス付与などに便利
  • v-bind="$attrs":属性自体の置き換え

-Vueと共通
-,

© 2024 aLiz Nuxt