definePropsの使い方
TypeScriptでは下記のコードのように、defineProps
のジェネリクスに受け取りたいPropsを定義することができます。また、?
をメンバの末尾に付け加えることで、任意のPropsを定義することができます。
<script setup lang="ts">
const props = defineProps<{
firstName: string;
lastName: string;
job: string;
age?: number;
}>()
</script>
<template>
<div>
<p>name: {{ props.firstName + ' ' + props.lastName }}</p>
<p>job: {{ props.job }}</p>
<div v-if="props.age"><p>age: {{ props.age }}</p></div>
</div>
</template>
Propsを与える側から見ると、下記のようになります。age
は任意のPropsにしたので、今回は与えていません。
<template>
<ChildComponent
first-name="johnathan"
last-name="miller"
job="designer"
/>
</template>

Propsの内容を外に出す
defineProps
のジェネリクスでは型宣言を使用していたので、もちろん外部で宣言しておくことができます。
<script setup lang="ts">
interface Props {
firstName: string;
lastName: string;
job: string;
age?: number;
}
const props = defineProps<Props>()
</script>
<template>
<div>
<p>name: {{ props.firstName + ' ' + props.lastName }}</p>
<p>job: {{ props.job }}</p>
<div v-if="props.age"><p>age: {{ props.age }}</p></div>
</div>
</template>
参考資料
| Vue.js
Vue.js - The Progressive JavaScript Framework
コメント