Компоненти илова кардани маълумот дар 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>

Форми илова кардани коргари навро амалӣ кунед.