Nuxt3 / Vue3 – 親コンポーネントで定義したdataを子コンポーネントの props として渡して連動させる ( Compotision API )

どうやるんだろうと思ったがとりあえず以下で動いている
computed とか必要なかったようだ

呼び出し側

pages/example.vue

<template>
  <Example :name="name"/>
  Parent: Name :{{ name }}
  <button @click="setName()">Chage Name</button>
</template>

<script lang="ts" setup>

function setName(){
  name.value = "Bob"
}
const name = ref('Alice')

</script>

呼び出され側

componens/Example.vue

<template>
  <h3>Child: Name : {{ name }}</h3>

</template>

<script lang="ts" setup>

interface Props {
  name: string
}

withDefaults(defineProps<Props>(), {
  name: '',
})

// このように定数を定義しなくても使える
// const props = withDefaults(defineProps<Props>(), {
//   name: '',
// })

</script>

表示例

親のボタンを押すと
親/子で両方の値が変わるのが分かる

NOTE

ただしこの書き方では子コンポーネントで値を変えるということが出来なかった

環境

• Nuxt 3.2.2

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter