Как добавить двустороннюю привязку данных к пользовательским компонентам в Vue.js

Введение

В этой статье вы узнаете, как добавить директиву v-model для пользовательских компонентов в Vue.js. Хотя директива v-model является мощным инструментом для добавления двусторонней привязки данных в ванильные компоненты Vue.js, поддержка пользовательских компонентов не так развита.

Предпосылки

Понимание двусторонней привязки данных в Vue.js рекомендуется, но не обязательно. Чтобы узнать больше о двусторонней привязке данных, ознакомьтесь с нашим руководством по использованию v-model для двусторонней привязки в Vue.js.

Реализация директивы v-model

Чтобы понять, как реализовать поддержку v-model в ваших компонентах, вам нужно понять, как это работает внутри. Значение v-model=prop является сокращением для :value=prop @input=prop=arguments\[0\].

Таким образом, чтобы сделать ваш компонент совместимым с директивой v-model, он должен принимать атрибуты :value и @input для добавления и отправки значение, когда пользователь взаимодействует с вашим приложением Vue.js.

В файле DatePicker.vue создайте пользовательский компонент, который принимает значения месяца и года в объекте. Атрибуты :value и @input будут представлять значения, на которые ссылается ваш компонент. Установите шаблон с входными данными для значений month и year:

<template>
  <div class="date-picker">
    Month: <input type="number" ref="month-picker" :value="value.month" @input="updateDate()"/>
    Year: <input type="number" ref="year-picker" :value="value.year" @input="updateDate()"/>
  </div>
</template>

<script>
export default {
  props: ['value'],

  methods: {
    updateDate() {
      this.$emit('input', {
        month: +this.$refs.monthPicker.value,
        year: +this.$refs.yearPicker.value
      })
    }
  }
};
</script>

В теге script ваш пользовательский метод updateDate() применяет общедоступное свойство экземпляра .$emit() для обновления значений в месяц и год в зависимости от ввода пользователя.

Чтобы использовать пользовательский компонент в других файлах Vue.js, установите директиву v-model для привязки и добавления значений из ваших свойств month и year. в файле WrapperComponent.vue:

<template>
  <div class="wrapper">
    <date-picker v-model="date-picker"></date-picker>
    <p>
      Month: {{date.month}}
      Year: {{date.year}}
    </p>
  </div>
</template>

В теге script импортируйте свой пользовательский компонент и вставьте его в свойство components. Это задействует функциональность, содержащуюся в вашем компоненте DatePicker, в вашем файле WrapperComponent.vue:

<script>
import DatePicker from './DatePicker.vue';

export default {
  components: {
    DatePicker
  },

  data() {
    return {
      date: {
        month: 1,
        year: 2017
      }
    }
  }
})
</script>

Модель data() сохраняет и возвращает значения ваших свойств month и year.

Чтобы проверить, двусторонняя привязка с пользовательскими компонентами требует, чтобы атрибуты :value и @input добавляли и выдавали обновленную дату в одном вызове.

Практика v-модели в Advanced Components

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

В файле StringDatePicker.vue создайте пользовательский компонент, который передает строку со структурой m/yyyy. Установите атрибуты :value и @input в свои входные данные, чтобы принимать и обновлять значения из вашего пользовательского компонента:

<template>
  <div class="date-picker">
    Month: <input type="number" ref="monthPicker" :value="splitDate.month" @input="updateDate()"/>
    Year: <input type="number" ref="yearPicker" :value="splitDate.year" @input="updateDate()"/>
  </div>
</template>

Используя вычисляемое свойство, в данном случае splitDate, вы можете разделить и вернуть входную строку в объект со свойствами month и year:

[label StringDatePicker.vue] 
<script>
export default {
  props: ['value'],

  computed: {
    splitDate() {
      const splitValueString = this.value.split('/');

       return {
        month: splitValueString[0],
        year: splitValueString[1]
      }
    }
  },

  methods: {
    updateDate() {
      const monthValue = this.$refs.monthPicker.value;
      const yearValue = this.$refs.yearPicker.value;
      this.$emit('input', `${monthValue}/${yearValue}`);
    }
  }
};
</script>

Объект methods применяет свойство updateDate() для получения обновленных месяца и года из входной строки. Теперь вы можете импортировать расширенный пользовательский компонент StringDatePicker в другой файл и использовать директиву v-model для привязки и добавления ваших значений из вашего месяца и year одновременно.

Заключение

Директива v-model обеспечивает дополнительную функциональность при реализации в пользовательских компонентах Vue.js. Вы также можете интегрировать двустороннюю привязку данных в расширенные пользовательские компоненты для преобразования типов данных в точные форматы.

Чтобы узнать больше о Vue.js, посетите страницу темы Vue.js.