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

Прослушивание событий из дочерних компонентов в родительских компонентах

По мере разработки нашего компонента  для некоторых возможностей может потребоваться передавать данные обратно в родительский компонент. Например, мы можем решить включить функцию для доступности, чтобы увеличивать размер текста в записях блога, оставив остальную часть страницы с размером текста по умолчанию.
В родительском компоненте мы можем добавить свойство postFontSize для этой возможности:
new Vue({
el: '#blog-posts-events-demo',
data: {
posts: [/* ... */],
postFontSize: 1
}
})
Которое будет использоваться в шаблоне для управления размером шрифта для всех записей блога:

v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
>

Теперь давайте добавим кнопку для увеличения текста прямо перед содержимым каждой записи блога:
Vue.component('blog-post', {
props: ['post'],
template: `

{{ post.title }}

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

`
})
Проблема в том, что эта кнопка ничего не делает:

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

Когда мы нажимаем на кнопку, нужно сообщить родительскому компоненту, что ему необходимо увеличить размер текста для всех записей блога. К счастью, экземпляры Vue предоставляют собственную систему событий для решения этой проблемы. Родительский компонент может прослушивать любые события на экземпляре дочернего компонента с помощью v-on, как мы это делаем с нативными событиями DOM:
...
v-on:enlarge-text="postFontSize += 0.1"
>
Затем дочерний компонент может сгенерировать событие с помощью встроенного метода $emit, передавая ему имя события:

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

Благодаря прослушиванию события v-on:enlarge-text="postFontSize += 0.1", родительский компонент отследит событие и обновит значение postFontSize.