Vueの$attrsについて

Vueには$attrsというAPIがあります。

jp.vuejs.org

使い方についてはここら辺を参考にしてください。

isoppp.com

使い方は分かってもこれの使い所がよくわからなかったのですが、先日先輩に教えていただいたので書き記しておきます。

結論から書くと

親コンポーネントから子コンポーネントへたくさんpropsを渡す＋子側でそのpropsをtemplate部分で使わない時

です。

具体的なコードで見ていきましょう。 まずは$attrsを使うのが有効な場合

parent.vue
// 親側
<MyComponent foo="foo" bar="bar" hoge="hoge" fuga="fuga" />

Child.vue
// 子側
<template>
<div>
これは子コンポーネントです。propsをtemplate部分で使っていません。
使うときは{{ $attrs.foo }} こうやって使います。
</div>
</template>

このようにpropsを直接template部分で使わないときは全てまとめて渡すことに意味があります。 例えば、colorといったプロパティはそのまま渡すことで子コンポーネントの色を変えることができます。 しかし、templateで使おうと思ったら、いちいち$attrs.fooのように書かなくてはいけません。これは浮上に面倒ですし可読性も良くありません。

続いて$attrsを使うのが微妙な時(子側で明示的に宣言する形)

parent.vue
// 親側
<MyComponent label="ラベル1 ラベル2 ラベル3" foo="foo" bar="bar" />

Child.vue
// 子側
<template>
<div>
{{ label }}
{{ foo }}
{{ bar }}
</div>
</template>

<script>
----------省略------------
props: {
  label: {
    type: string,
    requred: true
  },
  ......

</script>

このようにtemplate部分でガッツリ使うようなpropsを渡すときは子側でpropsを明示的に設定してあげることでtemplate部分でも{{ foo }}のように簡潔に書くことができます。また、必ず必要なpropsにはrequired: trueを設定することで、もしそのpropsがなければコンソールにエラーが出るようになります。