Vue.js. Создание базового компонента для текстового поля ввода

Давайте начнем разработку базовых элементов Vue форм с такого элемента как текстовое поле для ввода. Пожалуй, это одно из самых распространенных полей, с которыми приходиться иметь дело, при работе с формами. 

Давайте в папке Base, которую мы подготовили в предыдущем видео, создадим новый Vue компонент, который, соответственно, назовем BaseInput.vue (базовое текстовое поле для ввода).

Как правило, все элементы форм желательно обрамлять в некий контейнер. Я привык это делать в элементе <div class="field"></div>.

Далее у нашего текстового поля для ввода будет label и будет сам элемент input со значением атрибута type="text". Это будет нашим полем для ввода.

Далее нам нужно подумать какие свойства мы будем получать на вход этого компонента, что пользователь будет нам сюда передавать. 

Создаем props и первое, необходимое свойство, которое нам понадобиться - это modelValue. Это то значение, которое будет задано для аргумента v-model, которое будет передавать в этот аргумент. По сути, это и будет являться значением для нашего поля input. 

И второе свойство, которое нам понадобиться - это label. Это то значение, которое будет для нашей метки. Давайте укажем, что label нужно отображать только тогда, когда передано какое-то значение для label. 

Далее, присваиваем значение modelValue, которое будет передано в наших свойствах нашему текстовому полю. Т.е. полю input. 

То, что пользователь укажет в нашем v-model, будет передаваться в текстовое поле. Остается сделать так, что если пользователь что-то будет менять в нашем поле, чтобы менялось и значение v-model заданное в родительском компоненте. 

Для этой задачи мы можем воспользоваться событием input и с помощью emit мы обновляем наше modelValue у родительского компонента и передаем туда то значение, которое есть в нашей форме. 

Собственно, все. Давайте попробуем вывести это в нашем родительском компоненте. И мы импортируем наш baseInput, который находится в папку Base в родительский компонент и теперь можем его здесь вывести.

Далее прописываем этот компонент в разделе components и в data указываем то свойство, которое будет использоваться в качестве значения v-model для текстового поля. 

Давайте пропишем наш компонент внутри шаблона

<BaseInput
    v-model="input"
    label="Текстовое описание"
>
</BaseInput>

<template>
  <div class="field">
    <label v-if="label">{{ label }}</label>
    <input
        type="text"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        @change="$emit('onChange', $event.target.value)"
    >
  </div>
</template>

<script>
export default {
  name: "BaseInput",
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>

</style>

Таким образом можно создать простое текстовое поле, которое можно использовать в ваших формах.