Vue-da Melumat Elave Etmek Ucun Komponent

Indi yeni userler elave etmek ucun formani reallasdiraq. Bu formani ayrı bir komponent kimi edecik. Reallasdirmaga baslayaq. Evvelce ana komponentde user elave etmek ucun metod yaradaq:

App.vuemethods: {
  add(name, surn) {
    let id = this.users.length + 1;
    
    this.users.push({
      id,
      name,
      surn
    });
  }
}

Ana komponentin templatinde usaq komponenti elave edek:

App.vue<template>
  <UserForm @add="add" />
</template>

Usaq komponentde inputlari idare etmek ucun xususiyyetler yaradaq:

components/UserForm.vuedata() {
  return {
    newName: '',
    newSurn: '',
  }
}

Usaq komponentde melumatlari yadda saxlamag ucun metod yaradaq:

components/UserForm.vuemethods: {
  save() {
    this.$emit('add', this.newName, this.newSurn);
  }
}

Usaq komponentin templatini yaradaq:

components/UserForm.vue<template>
  <input v-model="newName">
  <input v-model="newSurn">
  
  <button @click="save">
    save
  </button>
</template>