# Компонент для добавления данных в 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>`

Реализуйте форму для добавления нового работника.

← →
↑