definePropsの使い方【Vue3+TS】

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>