Vue3　Nuxtでの値渡し　親から子

親から子への値渡しに対して業務で行ったため、その備忘録でカキコ

値渡し　親

pages/testshow/show.vueみたいなファイルを作成。

<template>
 <div class="main">
      <div>
        <showResult :show-content="content" />
      </div>
  </div>
</template>

<script setup lang="ts">
const content = 'テスト表示'
</script>

親の画面からshowResultというコンポーネントで作成した子に値を渡す
子へ渡した値が画面に表示される

値渡し　子

プロジェクト内のcomponentsでshowResult.vueファイル作成して下記内容にすれば下記コンポーネントを使用している親のファイルから値渡しされた場合、子コンポーネントで表示される。

<template>
 <div class="main">
      <div>
        {{ content }}
      </div>
  </div>
</template>

<script setup lang="ts">

const props = defineProps<{
  content: string
}>()

const content = props.content

</script>