Vueのpropsの使い方と基本的な書き方
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Vue の props の使い方と、基本的な書き方についてまとめました
props とは？
Vue.js において props とは、親コンポーネントから子コンポーネントに値を渡す時に使うものです。
propertiesの略であり、親コンポーネントから渡された値を、子コンポーネントで自動的に格納する箱のようなイメージです。
props の基本的な書き方
subtitle という名前の props を使う場合
親コンポーネントでの記述
子コンポ ーネントを埋め込み、子コンポーネントの props にデータを渡します。
渡したいデータが変数の場合、v-bind を使います。
<div>
<Children subtitle="サブタイトル" />
</div>
<div>
<Children :subtitle="subtitle" />
</div>子コンポーネント
Composition API (setup)のとき
<template>
<div>{{ subtitle }}</div>
</template>
<script setup>
defineProps({
subtitle: {
type: String,
default: "",
},
})
</script>Option API(Vue 2)のとき
<template>
<div>{{ subtitle }}</div>
</template>
<script>
export default {
props: {
//subtitleという名前のpropsがくる
subtitle: {
type: String,
default: "",
},
},
}
</script>解説
親コンポーネント
データ は親から子へ送るということに注意しながら、
親で子コンポーネントを呼び出しているところに、props=** と書きます。
propsの部分には、子コンポーネントで受け皿として書かれている名前を書く必要があります。
今回のケースだとその名前がsubtitleなため、このような書き方になっています。
<Children subtitle="サブタイトル" />子ではデータの受け皿を用意しておく
子コンポーネントでは、props の名前を決めて受け皿として準備しておく必要があります。
Vue2 で使われていた OptionAPI と Vue3 から主流になった CompositionAPI で書き方が違うことには注意が必要で、前述の基本的な書き方で確認してください。
<script setup>
defineProps({
subtitle: {
type: String,
default: "",
},
})
</script>複数の props を使う
<script setup>
defineProps({
subtitle: {
type: String,
default: "",
},
title: {
type: String,
default: "",
},
})
</script>オブジェクトや配列を使いたいとき
独特な書き方ですがこうなります。
<script setup>
defineProps({
options: {
type: Object,
default: () => ({}), //
},
items: {
type: Array,
default: () => [],
},
})
</script>default: {}だとエラーになります。
書き方が違う理由については、
プリミティブ型と参照型の違い
プリミティブ型（例: String, Number, Boolean）は、値が直接その変数に格納されるため、別々の変数に同じ値を指定しても互いに影響しません。 参照型（例: Object, Array）は、変数に実際のデータが格納されるのではなく、データへの参照が格納されます。そのため、同じオブジェクトや配列を複数のコンポーネントで共有すると、一方の変更が他方にも影響します。
だからです。
template 内で使用する
<template>
<p>{{ subtitle }}</p>
</template>script 内で使用する
CompositionAPI
console.log(subtitle)optionAPI
this が必要になるので注意してください。
console.log(this.subtitle)最後に、全体のコード
親コンポーネント
<template>
<div>
<h1>親コンポーネント</h1>
<Children subtitle="サブタイトル" />
<Children :subtitle="subtitle" />
</div>
</template>
<script>
import Children from "@/components/Children"
export default {
components: {
Children,
},
data() {
return {
subtitle: "サブタイトル２",
}
},
}
</script>子コンポーネント
<template>
<div>
<h2>子コンポーネント</h2>
<p>{{subtitle}}</p>
</div>
</template>
<script>
export default {
props: {
subtitle: {
type: String,
default: "",
},
},
}
</script>まとめ
以上、Vue の props の基本的な書き方についてまとめた記事でした。
Vue2 と Vue3 が混在する世の中なので大変ですね。
参考になれば幸いです。
