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

4151 ワード
Vue.js コンポーネント JavaScript nuxt.js JavaScript テキストリンク

🎈 この記事はWP専用です
https://wp.me/pc9NHC-li

前置き

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

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

inheritAttrs とは

inherit
英語で「受け継ぐ」

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

inheritAttrs: true

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

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

【解説】

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

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

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

が！

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

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

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

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

<script lang="ts">
export default {
 inheritAttrs: true,
}
</script>
index.vue
<template>
<div class="page">
  <Link
    to="/sample"
    target="_blank"
  />
</div>
</template>

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

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

inheritAttrs: false

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

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

【コード】

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

v-bind="$attrs" とは

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-li