はじめに

こんにちは、Mottyです。
Vue.jsにおいてコンポーネント指向は便利ですが、変数の受け渡しなど一部の機能がややこしかったりします。
去年12月のアップデートで親から子への伝搬が便利になったので、まとめていきます。

子コンポーネントの実装

VmodelChild.vue

<script setup>
const data = defineModel(); //受け渡したい変数を定義
inputs.value= "value from child"; //.valueで受け渡したい変数の中身を記入
;</script>
<template>
    <div class="wrapper">
        <button> This is a Child Coomponent</button>
    </div>
</template>

親コンポーネントの実装

App.vue

<script setup>
import {ref} from 'vue';
import VmodelChild from './components/VmodelChild.vue';
const inputs = ref("") //ref関数で監視する必要あり
const showvalue = () => {
    alert(inputs.value);
}
</script>
<template>
    <VmodelChild v-model="inputs" @click="showvalue" />
</template>

結果

子コンポーネントをクリックすると、親で定義した関数によって、その値を表示することができた。これは子コンポーネントで定義した値を親側から取り出せたことを意味する。

備考

defineModel(),ref()も、定義する変数型がどちらもrefなので、
.valueによってアクセスしなければいけない。

子コンポーネント側をinputタグにし、v-modelで監視すると、親子間の双方向バインディングも可能