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.

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