などの疑問や悩みを解決してまいります。
Vue.jsでは一つの要素の塊に対してコンポーネントファイルを用意して分割するして管理していくことが一般的です。
しかし、親コンポーネントが持つ定数や変数の値を子コンポーネントでも使用したいことがあるかと思います。
この場合はprops
という機能を使用することで実現することが可能です。
今回の記事ではprops
を使用したコード例を紹介しながら解説していきます。
propsとは
概要でも少し説明しましたが、props
は親コンポーネントが持つ定数や変数などの値を子コンポーネントに渡すことができる機能です。
例えば親コンポーネントにある配列やオブジェクトの値を使用したい場合、子コンポーネントに再度その式を記述するのではなく、props
を用いて親コンポーネントから子コンポーネントにデータを渡す方法が一般的です。
propsを使用したコード例
props
を使用したコードの一例をご紹介しながら説明していきたいと思います。
まず以下のようなコードが記述されたProps.vueを用意しました。
<script setup lang="ts">
type itemType = { id: number, name: string, price: number }
const fluitsItems:itemType[] = [
{ id: 1, name: 'apple', price: 200 },
{ id: 2, name: 'lemon', price: 300 },
{ id: 3, name: 'peach', price: 400 }
]
</script>
<template>
<div class="container">
<h1>販売果物一覧</h1>
<ul>
<li v-for="fluitsItem in fluitsItems" :key="fluitsItem.id">
<span>No.{{ fluitsItem.id }}</span><br>
<span>果物名:{{ fluitsItem.name }}</span><br>
<span>価格:{{ fluitsItem.price }}</span>
</li>
</ul>
</div>
</template>
このように簡単なリスト形式の一覧表を作成しています。
Post.vueでは果物の一覧表をオブジェクト形式のデータにまとめてv-for
ディレクティブで繰り返しリスト形式で表示させています。
-
【Vue.js】v-forディレクティブの使い方について解説します。
続きを見る
例えばこの繰り返し表示しているli
タグの部分を子コンポーネントファイルをした場合はどうなるでしょうか。
子コンポーネントファイルのPropsList.vueを用意して、親コンポーネントファイルのProps.vueを以下のように変更しました。
<script setup lang="ts">
import PropsList from './PropsList.vue';
type itemType = { id: number, name: string, price: number }
const fluitsItems:itemType[] = [
{ id: 1, name: 'apple', price: 200 },
{ id: 2, name: 'lemon', price: 300 },
{ id: 3, name: 'peach', price: 400 }
]
</script>
<template>
<div class="container">
<h1>販売果物一覧</h1>
<ul>
<PropsList />
</ul>
</div>
</template>
<script setup lang="ts"></script>
<template>
<li v-for="fluitsItem in fluitsItems" :key="fluitsItem.id">
<span>No.{{ fluitsItem.id }}</span><br>
<span>果物名:{{ fluitsItem.name }}</span><br>
<span>価格:{{ fluitsItem.price }}</span>
</li>
</template>
しかし、これでは先程のように正常に表示されません。
なぜならPropsList.vueには元々親コンポーネントファイルにあるfluitsItems
を繰り返し表示しようとしていますが、PropsList.vue内にfluitsItems
の指定がされていないためデータを参照ができないため表示することができなくなっているためです。
そのためPost.vue内にあるfluitsItems
の値をPropsList.vueに渡してあげるためにprops
を使用します。
使用したコードは以下のようになります。
<script setup lang="ts">
import PropsList from './PropsList.vue';
type itemType = { id: number, name: string, price: number }
const fluitsItems:itemType[] = [
{ id: 1, name: 'apple', price: 200 },
{ id: 2, name: 'lemon', price: 300 },
{ id: 3, name: 'peach', price: 400 }
]
</script>
<template>
<div class="container">
<h1>販売果物一覧</h1>
<ul>
<PropsList :fluitsItems="fluitsItems"/>
</ul>
</div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
type itemType = { id: number, name: string, price: number }
const props = defineProps<{
fluitsItems: itemType[];
}>();
</script>
<template>
<li v-for="fluitsItem in props.fluitsItems" :key="fluitsItem.id">
<span>No.{{ fluitsItem.id }}</span><br>
<span>果物名:{{ fluitsItem.name }}</span><br>
<span>価格:{{ fluitsItem.price }}</span>
</li>
</template>
それでは解説していきます。
まず子コンポーネント側でVueからdefineProps
をインポートしていきます。
このdefineProps
を記述することでprops
を使用することができるようになります。
import { defineProps } from 'vue';
次にこのdefineProps
を使用して、子コンポーネントに渡したい値を記述していきます。
記述方は以下のようになります。
const props = defineProps<{
fluitsItems: itemType[];
}>();
今回はこのように記述しています。
まず定数props
を作成し、defineProps
で型定義したキー名を指定しています。
このキー名に対し、props
で親コンポーネントから渡したい値を代入するような形になります。
これで子コンポーネント側のprops
の準備が整いました。
次に親コンポーネント側で値を渡す記述をするだけです。
記述方は以下のように行います。
<template>
<div class="container">
<h1>販売果物一覧</h1>
<ul>
<PropsList :fluitsItems="fluitsItems"/>
</ul>
</div>
</template>
props
で渡したい子コンポーネントのタグにv-bind
で子コンポーネント側で設定したキーに対してfluitsItems
オブジェクトを代入するだけです。
これで親コンポーネントから子コンポーネントに値を渡すことができるはずです。
props
の手順は以下の通りです。
メモ
- definePropsをインポートする。
- Typescriptの場合は子コンポーネントに渡すデータの型定義をする。
- 定数を指定し、その定数に対しdefinePropsを記述し、その中で値を渡すキー名とそのキー名に対して型指定を行う。
- 最後に親コンポーネント側で、値を渡したい子コンポーネントのタグに対して子コンポーネント側で設定したキー名に対して渡したい値を代入する。