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>