คอมโพเนนต์สำหรับเพิ่มข้อมูลใน Vue

ตอนนี้เรามาลองเขียนฟอร์ม สำหรับเพิ่มผู้ใช้ใหม่กัน เราจะสร้างฟอร์มนี้ในรูปแบบของ คอมโพเนนต์แยกต่างหาก มาเริ่มลงมือทำกัน เริ่มต้นด้วยการสร้างเมธอดสำหรับเพิ่ม ผู้ใช้ในคอมโพเนนต์หลัก:

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

ในเทมเพลตของคอมโพเนนต์หลัก ให้เชื่อมต่อกับคอมโพเนนต์ย่อย:

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

ในคอมโพเนนต์ย่อย ให้สร้าง พร็อปเพอร์ตี้สำหรับควบคุมอินพุต:

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

ในคอมโพเนนต์ย่อย ให้สร้าง เมธอดสำหรับบันทึกข้อมูล:

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

สร้างเทมเพลตของคอมโพเนนต์ย่อย:

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