こんな要望に答えていきます。
この記事は以下の環境で動作確認しました。
1 2 3 4 5 6 7 8 | $ node -v v8.11.4 $ npm -v 6.4.1 $ vue -V 3.0.5 |
この記事はサンプルコードをいくつか載せています。「Vue CLIを使った開発環境構築方法」で環境構築後に読み進めていただけると分かりやすいと思います。
propsはどんな時に使うの？
まずは、propsのおさらいをしましょう。
propsは親コンポーネントから子コンポーネントにデータを渡すときに使います。
基本的な書き方はつぎのとおりです。「Vue CLIを使った開発環境構築方法」で作ったVueプロジェクトを編集してみましょう。
親コンポーネント側
/src/views/Home.vueをつぎのように書き換えます。コードの内容についてはコメントをご確認いただければと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <template> <div> <!-- nameとpriceに静的な値をセットして 子コンポーネント(Item)にデータを渡しています。 --> <Item name="りんご" price="100"></Item> <!-- こっちのnameとpriceには動的な値をセットしています。 動的な値なので、nameとprice属性には:(v-bind:の省略形)を付けています。 --> <Item :name="items[0].name" :price="items[0].price"></Item> </div> </template> <script> // Itemコンポーネントをインポートしています。 import Item from '@/components/Item.vue'; export default { name: 'home', components: { // componentsプロパティにItemコンポーネントをセットして // template内でItemコンポーネントが利用できるようにしています。 Item, }, data: () => { return { // templateブロック内の2つ目のItemコンポーネントで使用しているデータです。 items: [ { name: 'ぶどう', price: 500 }, ], }; }, }; </script> |
子コンポーネント側
/src/components/内にItem.vueという.vueファイルを作ります。Item.vueの中身はつぎのようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <template> <div> <!-- nameとpriceの値を表示するためのテンプレートです。 --> {{ name }}: {{ price }}円 </div> </template> <script> export default { name: 'Item', // 親コンポーネントから受け取るpropsを定義しています。 // 定義方法はいろいろありますが、ここでは一番シンプルに // 配列でプロパティ名を書いています。 props: ['name', 'price'], }; </script> |
親コンポーネントから子コンポーネントへのデータ伝達が成功していれば、つぎのような画面が表示されます。※ローカルサーバを立ち上げてブラウザに表示するコマンドはnpm run serveです。詳しくは「Vue CLIを使った開発環境構築方法」をご確認ください。
親コンポーネントから子コンポーネントへのデータの流れは次のとおりです。
- 親コンポーネントでnameとpriceの値をセットした子コンポーネント(Item)を呼び出す。
- 子コンポーネントで設定しているpropsプロパティでnameとpriceを受け取る。
- 子コンポーネントのtemplateブロック内でnameとpriceの値を表示する。
以上が、Vue.jsのpropsの基本です。
propsを使う時に注意すること
propsを使う時は名前の付け方に注意する必要があります。htmlとVue.jsでは文字の処理方法が異なるからです。
htmlでは全ての文字を自動的に小文字に変換して処理します。どういうことかというと、例えば、つぎのように親コンポーネントで子コンポーネントを呼び出すとします。
1 | <Item discountPrice="980"></Item> |
discountPriceという属性はPriceのPを大文字で指定していますが、htmlでは自動的に小文字に置き換えられてしまうので、実際は「discountprice」とすべて小文字に変換されます。
1 | <item discountprice="980"></item> |
すると、子コンポーネントのpropsで、
1 | props: [discountPrice], |
のように指定していた場合、キーが異なってしまうため、子コンポーネント側で正常にデータを受け取ることができなくなってしまいます。
これを解決する方法は2つあります。
1つ目は、属性名を全て小文字で表記する方法です。しかし、2単語以上が連なる属性名を付ける場合、非常に読みづらい名前になってしまいます。
2つ目は、ケバブケース(ハイフンで単語を区切る)を使う方法です。先程の親コンポーネント側の記述を次のように変更します。
1 | <Item discount-price="980"></Item> |
このようにすると、Vue.jsが子コンポーネント側で、
discount-price → discountPriceと自動変換してくれます。それによって、データの受け渡しが正常に行われるようになります。
Vue.jsで親コンポーネントから子コンポーネントにデータを渡す時は属性名をケバブケース(例：discount-price、item-code)で指定しましょう。
propsにもっと詳しくなろう
コンポーネントでpropsオプションを定義する際、バリデーションや初期値を指定することができます。バリデーションを指定することで、親コンポーネントの属性値がバリデーションの条件を満たさない場合にコンソール上に警告を表示します。
バリデーションや初期値を持ったpropsオプションを実際に書いてみましょう。
1 2 3 4 5 6 7 8 9 10 11 | props: { itemName: { type: String, // 型の検査 default: 'itemName', // 初期値 required: true, // 必須かどうか }, itemPrice: { type: Number, required: false, }, }, |
このように、propsオプションの値をオブジェクトにして、その中にプロパティを設定していきます。上の例では、2つのプロパティを設定しています。
1つ目のitemNameプロパティの値は「文字列型」「初期値はitemName」「必須」と定義しています。2つ目のitemPriceプロパティの値は「数値型」「必須ではない」と定義しています。これらを満たさない場合は、コンソール上に警告が表示されます。
propsオプションを定義する時は、基本的にバリデーションを指定した方がいいでしょう。データ型の間違いによるアプリケーションの不具合防止や保守性向上にもつながるからです。
