Основы компонентов Базовый пример

Передача данных вместе с событием

Иногда бывает полезно отправить определённые данные вместе с событием. Например, если захотим, чтобы компонент  отвечал за то, насколько нужно увеличивать текст. В таком случае, мы можем использовать второй параметр $emit для предоставления этого значения:

Увеличить размер текста

Затем, когда мы прослушиваем событие в родителе, мы можем получить доступ к данным, переданным с событием, через $event:
...
v-on:enlarge-text="postFontSize += $event"
>
Или, если обработчик события будет методом:
...
v-on:enlarge-text="onEnlargeText"
>
Тогда значение будет передано первым аргументом:
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}

Использование v-model на компонентах

Пользовательские события также могут использоваться для создания нестандартных элементов ввода, которые работают через v-model. Не забывайте, что:

делает то же самое, что и:
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
При использовании на компоненте, v-model вместо этого делает следующее:
v-bind:value="searchText"
v-on:input="searchText = $event"
>
Чтобы это действительно работало, элемент  внутри компонента должен:

• 
  Привязывать значение атрибута value к входному параметру value
  
• 
  По событию input генерировать собственное пользовательское событие input с новым значением
  

Вот это в действии:
Vue.component('custom-input', {
props: ['value'],
template: `
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
Теперь v-model будет прекрасно работать с этим компонентом:

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