Vue.jsのプロパティー(props)の基本

Vue.jsにおいてdataとprops(プロパティ)の違いはデータの連携の部分です。propsはHTMLの属性からデータを受け取ったり、Vueの親と子で連携したりすることができます。

Vue.js:プロパティ を参考に今回は覚書をします。

propsの定義の仕方はいくつかあります。まず、

props:['title','score']

とする方法で、簡潔に表現できる一方で中身がわかりづらいです。詳細を定義したいなら、

{
 title: {
  type: String,
  default: 'Vue.js',
 },
 score: {
  type: Nubmer,
  default: 0
 }
}

として、データの型やデフォルトの値まで指定する方法もあります。さらに、両者の中間ともいえる次のような書き方もできます。

props:{
  title: String,
  score: Number
}

プロパティはJavaScriptの中にいる際はキャメルケース(camelCase)で書きますが、文字の大小を区別しないHTML内ではケバブケース(kebab-case)に変換します。この読み替えはシステム内部でも行ってくれます。

プロパティの受け渡し

例えば次のようなVueコンポーネントがあったとします。

Vue.component('sample-comp', {
  props: ['samplePage','score'],
  template: '<h3>{{ samplePage }}</h3>'
})

このコンポーネントに値を渡すにはHTMLに次のように記述をします。

コーディング時、引数で渡す際の変数名はHTML側ではケバブケース(sample-page)で指定します。そうしておくと、プログラムは対応するキャメルケース(samplePage)を持つ変数に値を代入します。

HTML側のプロパティ名の前にv-bindを付けることで設定された値はJavaScriptの式だと判定されます。

v-bindを付けないとscoreには「35+1」という文字列が入りますが、付けた際には36という値が入ります。

v-bindを付けた際は、JavaScriptの配列やオブジェクトも渡すことができます。

オブジェクトのすべてのプロパティをコンポーネントに渡したい場合はv-vindを引数なしで使います。

sampleData:{
  samplePage: 'サンプル',
  score: 30
}

というオブジェクトがあった時、このすべてをVueコンポーネントに渡すには、

と書くことができます。

親と子の関係

Vueのコンポーネントでは階層的にコンポーネントを読み出すことができます。

<template>
...
<!-- pには親のプロパティがセットされていると仮定しています --> <child v-bind:param="p"></child>
...
</template>

<script>
import Child from '.../Child.vue';
export default{
  props: ['param'],
  components: {
  Child,
},
...
</script>

この例ではtempleteタグ内でChildというコンポーネント読みだしています。この時pという名前のJavaScriptの変数があると仮定しています。

読みだした側が親になり、読みだされた方が子になります。この時、pとして渡された親のプロパティの値を渡しています。そうすることで、親の変更は子に伝えられます。子側で受け取ったそのプロパティを子側から変更することは禁止されています。変更しても警告が出て親には伝えられません。

ちなみに、子が親から受け取ったプロパティの値をを変更したい場合は、親へイベント通知をして親から変更してもらいます。その際のイベント通知には$emitを使います。

子側ではmethodに$emit('event-name',param);と記載した関数を設定し、親に通知すべき変更が生じたら関数を呼び出してイベントを発生させます。event-name(イベントの名称)は親と同じ名前を使うことを条件に好きな名前を設定できます。

親側では子のコンポーネントを読み出す際に、@event-name="functionname"として子からイベントの通知を受けた際の呼び出す関数を記述します。@はv-on:の省略表記です。子から受け取ったparamは親側のmethodの記述の際method: functionname(param){...とすることで利用できます。