Vueコンポーネントのpropsについて

Last updated at 2017-12-18Posted at 2017-12-15

コンポーネントが他から使われる際に重要になってくる要素の一つにpropsがあると思います。propsは、コンポーネントを使う際に渡されるものなので、コンポーネントがいかに使いやすいかの重要な要素の一つになります。そこで使いやすいコンポーネントのためにpropsをどう記述するかまとめました。

propsの記述

propsはなるべく詳細に書きます。
propsを詳細に書くことで、そのコンポーネントを使う時どのような値を渡せばいいのかがわかり、使いやすくなります。
またdefault や require を使うことで、値の渡し忘れや設定忘れを検知したり防いだりできます。

props: ['defaultInput']

ではなく、

    props: {
      defaultInput: {
        type: String,
        default: 'Hello!'
      }
    }

のようにしましょう。

propsの型はなるべくプリミティブな型やStringなどにします。
propsの型に独自のObjectなどを渡すと、可読性が低くなります。そのObjectはどんな値を持っているのか、何を渡せばいいのかがすぐにはわかりづらくなり、ソースコードを追うことになる場合があります。

    props: {
      defaultInput: {
        type: MyObject
      }
    }

よりも、

    props: {
      title: {
        type: String
      },
      description: {
        type: String
      }
    }

の方がわかりやすいです。
もちろん場合によっては全てプリミティブで渡そうとすると、propsが多くなり、逆に使いづらくなることもあるので、その辺りはバランスの問題になるかと思いますが、できるだけpropsはわかりやすくするのがいいと思います。