Vue3　Nuxtでの値渡し 子から親

Vue3　Nuxtでの値渡し　子から親編

実務で行ったので備忘録としてカキコ
子から親への値渡しは状況が限られているので

• 親から子
• 子から親

この二パターンを含んだやり方を記載しときます。

値渡し　親

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

【親から子に'親'というStringの値を渡して子画面にてボタンを押すと、その内容が変更されて親に反映される】

という処理を作っていきます。

<template>
 <div class="main">
      <div>
        <showResult v-model="parent" />
      </div>
      <div>
        {{ parent }}
      </div>
  </div>
</template>

<script setup lang="ts">
const parent = ref('親')
</script>

親の画面からshowResultというコンポーネントで作成した子に値を渡す

値渡し　子

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

値を変更するためにボタンを例で作成して押下したら親から渡された値が変更されるように処理を記載。

<template>
 <div class="main">
      <div>
     <p> 子の画面です </p>
      </div>
　　<button @click="change">クリックしてください</button>
  </div>
</template>

<script setup lang="ts">

interface Props {
  modelValue: string
}

interface Emits {
  (e: 'update:modelValue', newValue: string | undefined): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const value = computed({
  get(): string | undefined {
    return props.modelValue
  },
  set(value: string | undefined) {
    emit('update:modelValue', value)
  },
})

const change = () => {
    value.value = '子画面でボタン押下'
} 

</script>

親から子に値を渡すだけなら簡単ですが、その値を変更して子から親に渡すとなると処理が多くなりますね。

僕はこのやり方ですが、他になにかあれば教えてください。