【Vue.js】コンポーネントにpropsを定義する際のおすすめの方法

Vue.js
スポンサーリンク

はじめに

この記事ではVue.jsのコンポーネントにpropsを定義する際に、どうするのが良いかについて説明します。

内容

ありがたいことに、Vue.jsでは公式からスタイルガイドが提供されています。

propsの定義方法についても記載されていますので、以降ではその内容について確認していきます。

スタイルガイド — Vue.js
Vue.js - The Progressive JavaScript Framework
jp.vuejs.org

Not Awesome

まず最初にコンポーネントにpropsを定義する場合、下記のように配列にプロパティ名を要素として設定する方法がありますが、これは非推奨となっています。

props: ['status']

そして次の内容がスタイルガイドにおいて、推奨とされている方法です。

Awesome

その1

props: {
  status: String
}

その2（その1よりも良い方法）

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

propsには”type”や”required”、”validator”以外に”default”属性を設定することが可能です。

※ propsに設定可能な属性の、最新の情報については公式サイトを参照下さい。

プロパティ — Vue.js
Vue.js - The Progressive JavaScript Framework
jp.vuejs.org

まとめ

コミットされたコード内で、プロパティの定義は常に少なくとも1つのタイプを指定し、できる限り詳細とするべきです。

推奨とされている方法は、プロパティがどういったタイプかを指定するように求めています。

そのメリットについてもちゃんと説明されています。

・それらはコンポーネントの API を記録するため、そのコンポーネントの使用方法が簡単に分かります。
・開発中にもしコンポーネントに対して誤った設定のプロパティが提供されたら、 Vue はあなたに警告します。それは潜在的なエラー原因の検知に役立ちます。

以上のことから、一時的なコード以外は、propsのタイプを宣言するように習慣づけておくと良さそうですね。

スポンサーリンク