[Vue] コンポーネント props

vue.js のチュートリアル
propsについて。

子コンポーネントは、親コンポーネントから props を介して入力を受け取る。

子コンポーネントの作成。

子コンポーネントに受け入れる props を宣言する。

<script setup>
const props = defineProps({
  msg: String
})
</script>

defineProps() って初めて見た。これを使うのか。

あとは、前回と同様にテンプレートを定義する。

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

親コンポーネント側

呼び出し側はあんまり変わらない。
こんな感じでpropsを指定できる。
子コンポーネントの方で、msg を宣言してるので、msg= とする。

<ChildComp :msg="greeting" />

全体。

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

stackblitzで書いた。