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

分割代入

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

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

❓どんな時に使うか
　まとまったdataを子で管理したい時に使います！

Text.vue

<template>
 <div class="title title-page">
   <slot v-bind:user="user">
     {{ user.lastName }}
   </slot>
 </div>
</template>

<script>
export default {
 data () {
   return {
     user: {
       firstName: 'first',
       lastName: 'last',
     },
   }
 },
}
</script>

index.vue

<template>
 <div class="page">
   <Text>
     <template #default="sample">
       {{ sample.user.firstName }}
     </template>
   </Text>
 </div>
</template>

<script>
import Text from '~/components/Text.vue'

export default {
 components: {
   Text,
 },
 data () {
   return {
   }
 },
}
</script>

動的なスロット名

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

【解説/index.vue】
・ リンク
　これと全く同じです❗️
　リンク

Link.vue

<template>
  <a :[attributeName]="url"> リンク </a>
</template>

<script>
export default {
 data () {
   return {
     attributeName: "href",
     url: "/"
   }
 },
}
</script>

index.vue

<template>
 <div class="page">
   <Link />
 </div>
</template>

<script>
import Link from '~/components/Link.vue'

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

これをslotで…

できるのですが、
簡単な方法があります！笑

v-bind="$attrs"
これを使います！

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

Link.vue

<template>
  <a v-bind="$attrs">リンク</a>
</template>

<script>
export default {
}
</script>

index.vue

<template>
 <div class="page">
   <Link
     href="/"
   />
 </div>
</template>

<script>
import Link from '~/components/Link.vue'

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

まとめ

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

slot：テキスト
props：それ以外、クラス付与などに便利
v-bind="$attrs"：属性自体