Vue에 데이터 추가하기 컴포넌트

이제 새로운 사용자를 추가하기 위한 폼을 구현해 보겠습니다. 이 폼은 별도의 컴포넌트로 만들 것입니다. 구현을 시작해 봅시다. 먼저 부모 컴포넌트에서 사용자를 추가하는 메소드를 만들어 보겠습니다:

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

부모 컴포넌트의 템플릿에서 자식 컴포넌트를 연결하겠습니다:

<template>
	<UserForm @add="add" />
</template>

자식 컴포넌트에서 입력 필드를 제어하기 위한 데이터 속성을 만들겠습니다:

data() {
	return {
		newName: '',
		newSurn: '',
	}
}

자식 컴포넌트에서 데이터를 저장하기 위한 메소드를 만들겠습니다:

methods: {
	save() {
		this.$emit('add', this.newName, this.newSurn);
	}
}

자식 컴포넌트의 템플릿을 만들겠습니다:

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

새로운 직원을 추가하기 위한 폼을 구현하세요.