Vueでコンポーネントを使う際に、親コンポーネントから子コンポーネントにデータの受け渡しが必要となる場合があります。そのような場面で便利なVueのprops(プロパティ)について解説します。
Vueのpropsとは?
Vueには、Vueインスタンスを再利用できるコンポーネントという仕組みがあります。コンポーネントは他のVueインスタンスから呼び出されて使われますが、親インスタンスから子インスタンス(コンポーネント)へデータを受け渡す場合があります。そのデータの受け渡しで重要となるのが、props(プロパティ)です。propsを用いれば親から子への単一方向のデータの流れを実現でき、データの流れを把握しやすくなります。
Vueコンポーネントのおさらい
propsの解説に入る前に、Vueコンポーネントの書き方をおさらいしておきます。コンポーネントは次のように定義されます。今回はクリックするたびに末尾の’!’マークが1つずつ増えていくボタンを、子コンポーネントとしてbutton-mark.vueというファイルで作成します。
(button-mark.vue)
<template> <button v-on:click="mark = mark + \'!\'">Hello{{ mark }}</button> </template> <script> export default{ data: function () { return { mark: '!' } }, } </script>
実際にページを表示するmain.vueは次のよう記述できます。この例では、コンポーネントを呼び出して2つのボタンを作成しています。
(main.vue)
<template> <button-mark></button-mark> <button-mark></button-mark> </template> <script> import button-mark from './button-mark.Vue' export default{ components: { button-mark }, } </script>
実際の表示は次のようになります。
Vueのpropsの使い方
それではprops(プロパティ)の書き方について説明していきます。
Vueのpropsの書き方
親(コンポーネント)から子(コンポーネント)への流れを実現するpropsの使い方として抑えておきたいのは、次の2つです。
- 子のscriptタグ内(js記述部分)のpropsで、親から受け取るプロパティ名を列挙
- 親のtemplateタグ内(html記述部分)で、子の呼び出しとデータの受け渡し
子のscriptタグ内
(component.vue)
<template> (略) </template> <script> export default { props: [ここにプロパティ名を記述], }; </script>
親のtemplateタグ内
(main.vue)
<template> <component このタグ内で、propsで列挙されたプロパティにデータを渡す></component> </template> <script> (略) </script>
Vueのpropsの実装例
前項で紹介したコンポーネントに、親からのデータを受け取って名前を表示できるようにした場合を考えてみます。その際には次のように子でpropsを宣言します。
(button-mark.vue)
<template> // {{ name }}を追加して表示させる <button v-on:click="mark = mark + \'!\'">Hello {{ name }}{{ mark }}</button> </template> <script> export default{ props: ['name'], // propsで’name’を列挙 data: function () { return { mark: '!' } }, } </script>
また、親でのデータの受け渡し方は次のようになります。静的・動的それぞれのデータの渡し方を挙げています。
(main.vue)
<template> <p> <input v-model = "nameParent"> // inputからの動的なプロパティnameParent </p> <button-mark name="John"></button-mark> // 静的な文字列を渡す場合 <button-mark :name="nameParent"></button-mark> // 動的なプロパティを渡す場合 </template> <script> import button-mark from './button-mark.Vue' export default{ components: { button-mark }, // inputで用いるプロパティを宣言 data: { nameParent: '' }, } </script>
このように親の入力欄が変更されると、子にもデータが受け渡され反映されます。
Vueのpropsの応用的な使い方
オブジェクトの配列によるVueのpropsの列挙
先ほどまでは、文字列の配列によって列挙してきましたが、オブジェクトの配列としても列挙することができます。オブジェクトの配列を使うメリットは、型の指定・必須項目かどうか・デフォルト値など、様々な指定できることです。オブジェクトの配列による子でのprops(プロパティ)の列挙の方法を次に示します。
props: { name: { type: String, // String型に限定 required: true, // 必須項目 }, number: { type: Number, // Number型に限定 default: 20 // default値を設定 }, data: { type: [String, Number] // 複数の型に対応 }, // String型の’YES’, ’NO’のみに限定 check: { validator :function (value) { return [‘YES’, ‘NO’].indexOf(value) !== -1 } }
typeで指定できる型は、String, Number, Boolean, Array, Object, Date, Function, Symbolのみです。
またこの時、型を指定したデータの受け渡しを、親では次のように行います。静的な値の場合でもv-bindが必要がポイントになるので注意してください。
<component :name="12"></componentk> // 静的な数値を渡す場合 <component :name="dataParent"></component> // 動的なプロパティの場合
Vueのpropsの命名方法
htmlの属性名は大文字と小文字の区別が行われません。そのため、子でキャメルケースで指定した場合には注意が必要で、親ではケバブケースで記述する必要があります。次に具体的な例を挙げます。
子でのpropsの列挙
props: [firstNumber]
親でのhtmlでの属性の書き方
htmlの属性となるfirst-numberがケバブケースになります。(一方でnumberParentはVueのプロパティなのでキャメルケースのまま書きます。)
// 動的なプロパティ”numberParent”を渡す場合 <component :first-number="numberParent"></component>
この記事のまとめ
本記事ではVueのprops(プロパティ)を紹介しました!
最後に記事の要点をまとめてみましょう。
- コンポーネントにおいて、親から子への単一方向へのデータの流れは、子でpropsを列挙し、親のhtmlで指定することで実現できる。
- propsの書き方は、文字列の配列かオブジェクトの配列。
- propsでの命名においてキャメルケースを用いた場合には、親のhtmlではケバブケースにする必要がある。
Vueのpropsを是非活用してみましょう!