はじめに
Vueで親コンポーネントから子コンポーネントに値を渡すpropについて、簡単にまとめました。
子コンポーネントの書き方
子コンポーネントでは、以下のように記述します。
<script>
export default {
props: ['hoge1', 'hoge2']
}
</script>
上記は、propsの名前のみを指定できます。
以下のように書くことで、他の項目も定義できます。
<script>
export default {
props: {
hoge1: {
type: String,
default: 'abc',
required: true
},
hoge2: {
type: String,
default: '',
required: false
}
}
}
</script>
typeでデータの型、defaultでデフォルト値、requiredで必須を指定できます。
親コンポーネントの書き方
親コンポーネントから子コンポーネントにデータを渡す場合は、以下のように記述します。
<template>
<!-- (prop名)="(データの値)" -->
<Child hoge1="ABC" hoge2="DEF">
</template>
<script>
import Child from 'child'
export default {
components: {
Child
}
}
</script>
また、固定値ではなく変数の値を渡したい場合は以下のようにv-bindを使用して記述します。
<template>
<!-- :(prop名)="(データ名)" -->
<!-- :hoge1 ⇨ v-bind:hoge1の省略形 -->
<Child :hoge1="dat1" :hoge2="dat2">
</template>
<script>
import Child from 'child'
export default {
components: {
Child
},
data () {
return {
dat1: 'ABC',
dat2: 'DEF'
}
}
}
</script>
命名について
親コンポーネントでプロパティを使用する場合はプロパティ名が小文字に変換されるため、小文字しか使えないのですが、子コンポーネントのプロパティをキャメルケースで記述した場合は自動でケバブケース（「-」で単語を繋ぐ書き方）に変換してくれます。
子コンポーネント
props: ['hogeData']
親コンポーネント
<!-- hogeData ⇨ hoge-data -->
<Child hoge-data="dat1">