などの疑問や悩みを解決してまいります。
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を記述し、その中で値を渡すキー名とそのキー名に対して型指定を行う。
- 最後に親コンポーネント側で、値を渡したい子コンポーネントのタグに対して子コンポーネント側で設定したキー名に対して渡したい値を代入する。
