Vue.js 3+TypeScript環境での単一ファイルコンポーネント（SFC）における<script setup>部分で、Propsに任意のデフォルト値を設定する方法を紹介します。
実行時宣言の場合
以下のようにdefaultプロパティを追加することにより設定できます。
<script setup lang="ts">
defineProps({
text: {
type: String,
default: 'Default Text'
}
})
</script>
<template>
<p>{{ text }}</p>
</template>
型ベース宣言の場合
withDefaults関数を用いることで解決します。
第一引数にdefinePropsを、第二引数にデフォルト値を与えることにより設定できます。
<script setup lang="ts">
withDefaults(defineProps<{ text: string }>(), { text: 'Default Text' })
</script>
<template>
<p>{{ text }}</p>
</template>注意点として、配列やオブジェクトのデフォルト値を設定する際は、以下のようにファクトリ関数を渡す必要があります。
<script setup lang="ts">
interface Props {
texts: {
textA: string
textB: string
}
}
withDefaults(defineProps<Props>(), {
texts: () => ({
textA: 'Default Text A',
textB: 'Default Text B'
})
})
</script>
<template>
<p>{{ texts.textA }}</p>
<p>{{ texts.textB }}</p>
</template>
以上となります。ご質問等ありましたら、コメント欄にてお願いします。
コメント