JavaScript

【Vue.js】propsを使う時は命名に注意。サンプルコード有

課題を持った人
課題を持った人
Vue.jsでpropsは使ったことがあるんだけど、何となく使っていました。もうすこし詳しく教えてください。

こんな要望に答えていきます。

この記事は以下の環境で動作確認しました。

この記事はサンプルコードをいくつか載せています。「Vue CLIを使った開発環境構築方法」で環境構築後に読み進めていただけると分かりやすいと思います。

propsはどんな時に使うの?

まずは、propsのおさらいをしましょう。

propsは親コンポーネントから子コンポーネントにデータを渡すときに使います。

基本的な書き方はつぎのとおりです。「Vue CLIを使った開発環境構築方法」で作ったVueプロジェクトを編集してみましょう。

親コンポーネント側

/src/views/Home.vueをつぎのように書き換えます。コードの内容についてはコメントをご確認いただければと思います。

子コンポーネント

/src/components/内にItem.vueという.vueファイルを作ります。Item.vueの中身はつぎのようにします。

親コンポーネントから子コンポーネントへのデータ伝達が成功していれば、つぎのような画面が表示されます。※ローカルサーバを立ち上げてブラウザに表示するコマンドはnpm run serveです。詳しくは「Vue CLIを使った開発環境構築方法」をご確認ください。

親コンポーネントから子コンポーネントへのデータの流れは次のとおりです。

  1. 親コンポーネントでnameとpriceの値をセットした子コンポーネント(Item)を呼び出す。
  2. 子コンポーネントで設定しているpropsプロパティでnameとpriceを受け取る。
  3. 子コンポーネントのtemplateブロック内でnameとpriceの値を表示する。

以上が、Vue.jsのpropsの基本です。

propsを使う時に注意すること

propsを使う時は名前の付け方に注意する必要があります。htmlとVue.jsでは文字の処理方法が異なるからです。

htmlでは全ての文字を自動的に小文字に変換して処理します。どういうことかというと、例えば、つぎのように親コンポーネントで子コンポーネントを呼び出すとします。

discountPriceという属性はPriceのPを大文字で指定していますが、htmlでは自動的に小文字に置き換えられてしまうので、実際は「discountprice」とすべて小文字に変換されます。

すると、子コンポーネントのpropsで、

のように指定していた場合、キーが異なってしまうため、子コンポーネント側で正常にデータを受け取ることができなくなってしまいます。

これを解決する方法は2つあります。

1つ目は、属性名を全て小文字で表記する方法です。しかし、2単語以上が連なる属性名を付ける場合、非常に読みづらい名前になってしまいます。

2つ目は、ケバブケース(ハイフンで単語を区切る)を使う方法です。先程の親コンポーネント側の記述を次のように変更します。

このようにすると、Vue.jsが子コンポーネント側で、

discount-price → discountPriceと自動変換してくれます。それによって、データの受け渡しが正常に行われるようになります。

Vue.jsで親コンポーネントから子コンポーネントにデータを渡す時は属性名をケバブケース(例:discount-price、item-code)で指定しましょう。

propsにもっと詳しくなろう

コンポーネントでpropsオプションを定義する際、バリデーションや初期値を指定することができます。バリデーションを指定することで、親コンポーネントの属性値がバリデーションの条件を満たさない場合にコンソール上に警告を表示します。

バリデーションや初期値を持ったpropsオプションを実際に書いてみましょう。

このように、propsオプションの値をオブジェクトにして、その中にプロパティを設定していきます。上の例では、2つのプロパティを設定しています。

1つ目のitemNameプロパティの値は「文字列型」「初期値はitemName」「必須」と定義しています。2つ目のitemPriceプロパティの値は「数値型」「必須ではない」と定義しています。これらを満たさない場合は、コンソール上に警告が表示されます。

propsオプションを定義する時は、基本的にバリデーションを指定した方がいいでしょう。データ型の間違いによるアプリケーションの不具合防止や保守性向上にもつながるからです。

筆者
筆者
以上、propsについて解説しました。筆者はpropsオプションの命名でハマったことがあります∑( ̄口 ̄) 皆さんはお気をつけください。