【Nuxt.js】Nuxt文法編：$attrs

前置き

属性の受け継ぎに関する
$attrsをまとめました！

inheritAttrsと
v-bind="$attrs"の2種類があります🌟

inheritAttrs とは

inherit
英語で「受け継ぐ」

親で与えられた属性を受け継ぐか
真偽値で決めることができます。

inheritAttrs: true

リンク先が '/' で
新しいタブで開かれていますね！

これだけ見ると普通のリンクなのですが
解説・コードを見ると
奇妙に感じるかもしれません😨笑

解説

挙動を確認するために親子どちらでも
nuxt-linkタグのto属性でリンク先を指定しています🌟

to属性は子が優先されているのに
target属性は親のを引き継いでます。

もちろんtarget属性を子で指定すれば
子が優先されます！

が！

そもそも通常は親から子に何も使わず
何かを渡すことはできません。
属性に限らず、
テキストであれば
propsなりslotなり、何かを使います。
とっても変な感じがしますね😲

ちなみに属性を渡す場合は、
この後に解説するv-bind="$attrs"を使います🌟

うっかり何も使わず親で属性を渡しちゃってた！
ということは防ぎたいです。。。

inheritAttrs: trueは省略できる

分かりやすく記載していますが、
わざわざ書かなくてもOK！
最初からtrueの状態です

コード

) components

<template>
  <nuxt-link to="/">
    リンク！
  </nuxt-link>
</template>

<script lang="ts">
export default {
  inheritAttrs: true,
}
</script>

<nuxt-link to="/">

リンク！

</nuxt-link>

</template>

export default {

inheritAttrs: true,

}

</script>

) pages

<template>
 <div class="page">
   <Link
     to="/sample"
     target="_blank"
   />
 </div>
</template>

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

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

<Link

to="/sample"

target="_blank"

</div>

</template>

import Link from '~/components/Link.vue'

export default {

components: {

Link,

}

</script>

inheritAttrs: false

inheritAttrs: true
この奇妙な状態を解決するために
falseにしておくのが無難です🌟

今度は親の属性を引き継がず、
子の属性のみが反映されていますね！

コード

inheritAttrs: trueのコードをfalseに変えるだけ

v-bind="$attrs" とは

属性自体を親から渡したい時に使います！
また、渡したい属性が多くても簡単に渡せて便利です🌟

といってもピンとこないので
使いやすいパターンをご紹介します🍀

使用例1: <a href="/">

aタグのhref属性ごと渡してます。
これなら親でリンク先を指定できて
とっても便利です！

) components

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

<script>
export default {
}
</script>

</template>

export default {

}

</script>

) pages

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

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

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

<Link

href="/"

</div>

</template>

import Link from '~/components/Link.vue'

export default {

components: {

Link,

}

</script>

使用例2: <nuxt-link to="/">

aと同じです！
aは外部リンク、
nuxt-linkは内部リンクです。

) components

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

<script>
export default {
}
</script>

<nuxt-link v-bind="$attrs">リンク</nuxt-link>

</template>

export default {

}

</script>

) pages

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

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

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

<Link

to="/"

</div>

</template>

import Link from '~/components/Link.vue'

export default {

components: {

Link,

}

</script>

まとめ

inheritAttrs: trueはそもそも使わない方が良さそう
inheritAttrs: falseにするなら最初からv-bind="$attrs"を使った方が良さそう
3つ以上の要素ならv-if, v-else-if, v-else

いやいやinheritAttrs: true使えるよ！
ということがあれば教えていただけると嬉しいです🙇‍♀️