はじめに
こんにちは、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で監視すると、親子間の双方向バインディングも可能