Parent Component ile Child Component arasında v-model ilişkisi kurmak

VueJS’te componentler arasında iletişim kurmanın onlarca yolu var. v-model bu yollardan oldukça kullanışlı olanı. HTML inputlardaki bilgileri reaktif bir şekilde yakalamak için v-model kullanarak ‘two way binding’ kurarız. Peki HTML input dışında kendi oluşturduğumuz componentle de v-model ile iletişim kurabilir miyiz, evet.

Hadi başlayalım

Öncelikle components klasörü altında Child.vue adlı bir dosya oluşturalım.

Child.vue<script setup>
const props = defineProps({
modelValue: String,
})
</script>
const value = ref(props.modelValue)
<template>
<input v-model="value" />
</template>
const emit = defineEmits(['update:modelValue'])
watch(value, (newVal) => {
emit('update:modelValue', newVal)
})
Parent.vue<child v-model="someThing" />

--

--

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Safa Gayret

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.