コンポーネントのプロパティ
コンポーネントにプロパティを設定して、外部からパラメーターを設定できるようにできます。同じコンポーネントでもプロパティで表示や動作を変えることができます。
基本的なプロパティの利用法
図2のサンプルで、基本的なプロパティの実装方法を説明します。異なるプロパティを設定した同一種類のコンポーネントを2個、Webページに表示します。
図2で表示しているコンポーネントの実装は、リスト3の通りです。
<template>
<div class="component">
<h2>{{ name }}</h2><!--（1）-->
<ul>
<li>ID：{{ id }}</li>
<li>会社：{{ vendor }}</li>
<li>価格：{{ price }}</li>
<li>5G対応：{{ is5G === true ? 'はい' : 'いいえ' }}</li>
</ul>
</div>
</template>
<script>
export default {
props: ['id', 'vendor', 'name', 'price', 'is5G'] // プロパティ ...（2）
}
</script>
コンポーネントのプロパティは、<script>のprops（2）に設定します。ここではid（ID）、vendor（会社名）、name（商品名）、price（価格）、is5G（5G対応）の5種類のプロパティを設定しています。これらのプロパティはコンポーネント内で変数として参照できます。たとえばnameプロパティは（1）で「{{ name }}」と記述して表示できます。
コンポーネントを利用するWebページでは、リスト4の通り、コンポーネントタグの属性としてプロパティを設定します。
<h1>プロパティに値を直接設定</h1><!--（1）--> <Smartphone id="1" vendor="Apple" name="iPhone 11" price="74800" is5G="false"/> <h1>v-bindで変数を設定</h1><!--（2）--> <Smartphone v-bind:id="phoneId" v-bind:vendor="phoneVendor" v-bind:name="phoneName" v-bind:price="phonePrice" v-bind:is5G="phoneIs5G"/>
プロパティの属性には、値を直接設定する（1）ほか、v-bindディレクティブで変数をプロパティに反映させる（2）こともできます。
［補足］プロパティのデータ型を指定
リスト3（2）のプロパティ設定ではプロパティ名だけを列挙していましたが、propsをリスト5の通り記述すると、プロパティのデータ型を指定することもできます。リスト5では、idとpriceにNumber、vendorとnameにString、is5GにBooleanの型を指定しています。
props: {
'id': Number,
'vendor': String,
'name': String,
'price': Number,
'is5G': Boolean
}
データ型が一致しない値がプロパティに設定された場合、JavaScriptコンソールに警告が表示されます。詳細はサンプルコード（p002a-property-typed）を参照してください。
JavaScriptオブジェクトをプロパティにする方法
コンポーネントのプロパティには、文字や数字だけではなく、配列やJavaScriptオブジェクトも利用できます。ここでは、JavaScriptオブジェクトを利用する例を、図3のサンプルで説明します。JavaScriptオブジェクトをプロパティにする2パターンの方法に対応した、2個のコンポーネントが画面に表示されます。
コンポーネントを表示するWebページの実装はリスト6の通りです。
<template>
<div class="container">
<h1>オブジェクトをそのまま設定</h1><!--（1）-->
<Smartphone1 v-bind:spec="phoneSpec"/>
<h1>オブジェクトのプロパティを設定</h1><!--（2）-->
<Smartphone2 v-bind="phoneSpec"/>
</div>
</template>
<script>
import Smartphone1 from '~/components/Smartphone1'
import Smartphone2 from '~/components/Smartphone2'
export default {
components: {
Smartphone1,
Smartphone2
},
data() {
return {
phoneSpec: { // コンポーネントに設定するJavaScriptオブジェクト...（3）
id: 1,
vendor: 'Samsung',
name: 'Galaxy Note10+ 5G',
price: 111000,
is5G: true
}
}
}
}
</script>
コンポーネントに設定するJavaScriptオブジェクトは、（3）のphoneSpec変数です。このJavaScriptオブジェクトを、Smartphone1、Smartphone2の2種類のコンポーネントに設定して画面表示させます。
（1）では、「v-bind:spec="phoneSpec"」記述で、phoneSpec変数のJavaScriptオブジェクトを、Smartphone1コンポーネントのspecプロパティに設定します。Smartphone1コンポーネントでは、リスト7の通りpropsを設定して、specプロパティでJavaScriptオブジェクトを受け取り、内容を画面に表示します。
props: ['spec']
一方、（2）の通り「v-bind="phoneSpec"」と、プロパティ名なしでv-bindディレクティブを記述すると、JavaScriptオブジェクトの各プロパティを、コンポーネントの同名プロパティにそれぞれ設定します。Smartphone2コンポーネントのprops設定がリスト8の場合、phoneSpec.idプロパティがコンポーネントのidプロパティに、phoneSpec.vendorがコンポーネントのvendorプロパティに、それぞれ渡されます。name以降のプロパティも同様です。
props: ['id', 'vendor', 'name', 'price', 'is5G']
