Vueと共通

【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

) pages


inheritAttrs: false

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

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

コード

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


v-bind="$attrs" とは

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

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

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

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

) components

) pages


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

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

) components

) pages


まとめ

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

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

-Vueと共通
-,

© 2020 aLiz Nuxt