【Vue3】propsの書き方

コード

App.vue

<template>
  <TitleTemplate :main-title="タイトル" />
</template>

<script setup>
import TitleTemplate from 'TitleTemplate.vue'
</script>

TitleTemplate.vue

<template>
  <p>{{ mainTitle + subTitle }}</p>
</template>

<script setup>
defineProps({
  // 必須の場合
  mainTitle: {
    type: String,
    required: true,
  },
  // デフォルト値を設定する場合
  subTitle: {
    type: String,
    default: 'デフォルト文言'
  },
})
</script>

scriptでpropsを使用する場合は、変数に格納する。

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
})

const test = props.title
</script>

参考