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を是非活用してみましょう！