Komponente zum Hinzufügen von Daten in Vue

Lassen Sie uns nun ein Formular zum Hinzufügen neuer Benutzer implementieren. Wir werden dieses Formular als eine separate Komponente erstellen. Beginnen wir mit der Implementierung. Zuerst erstellen wir in der Elternkomponente eine Methode zum Hinzufügen eines Benutzers:

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

In der Darstellung der Elternkomponente binden wir die Kindkomponente ein:

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

In der Kindkomponente erstellen wir Eigenschaften zur Steuerung der Eingabefelder:

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

In der Kindkomponente erstellen wir eine Methode zum Speichern der Daten:

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

Erstellen wir die Darstellung der Kindkomponente:

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

Implementieren Sie ein Formular zum Hinzufügen eines neuen Mitarbeiters.