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

Senaryo gereği, tüm HTML inputları sarmalayan bir Child Componente ihtiyacımız olsun. Örnek olması amacıyla Parent’ta input kullanacağımız zaman, klasik HTML input kullanmak yerine kendi oluşturduğumuz <child /> elementini kullanmayı arzu ediyoruz.

Canlı demo: https://vue-parent-child-component-vmodel.netlify.app/

GitHub repo: https://github.com/gayret/vue-parent-child-component-vmodel

Hadi başlayalım

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

VueJS, parent componentle iletişim kuracak child componentin modelValue adında bir prop bekliyor olmasını istiyor. modelValue adlı prop üst componentte v-model ile bağlanmış state ile doğrudan ilişki kurabiliyor.

Child.vue<script setup>
const props = defineProps({
modelValue: String,
})
</script>

Yakaladığımız bu prop ile Child.vue içerisinde oluşturacağımız reaktif state’i ilişkilendirelim.

const value = ref(props.modelValue)

value adlı state’imizi template içerisindeki bir input’la two way binding yapalım.

<template>
<input v-model="value" />
</template>

Böylece Child.vue içerisindeki input, modelValue adlı prop’taki bilgiyle eşitlendi. Ancak henüz bu input içerisindeki bilginin değişimini Parent Component’e iletmiyoruz. Input’taki her değişimi takip etmek için VueJS’in watch reserved fonksiyonunu kullanabileceğimiz gibi, input’a @input eventListener’ı da ekleyerek aynı sonuca ulaşabiliriz. Bu örnekte watch ile yapıyorum.

Input’taki her değişimi Parent’a dağıtmanın tek yolu emit etmek. Bunun için emit fonksiyonunu define edelim. update:modelValue Parent Component tarafından otomatik olarak yakalanır.

const emit = defineEmits(['update:modelValue'])

Artık watch ile her değişimi Parent Component’e dağıtabiliriz.

watch(value, (newVal) => {
emit('update:modelValue', newVal)
})

Hepsi bu kadar, oluşturduğumuz Child adlı Component’i herhangi bir Component içerisine import edip v-model ile iletişim kurdurabiliriz.

Parent.vue<child v-model="someThing" />

GitHub repo: https://github.com/gayret/vue-parent-child-component-vmodel

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

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

Safa Gayret

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