LoginSignup
0

More than 3 years have passed since last update.

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

Posted at

分割代入

簡単にいうと別の場所で
別の変数名をきめれて
値を代入できること
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":属性自体

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0