Испускание событий в Vue

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

Пусть в родительском компоненте есть некоторый метод:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

Передадим этот метод параметром в дочерний компонент:

App.vue<template>
  <User @show="func" />
</template>

Пропишем испускаемое событие в настройке emits:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

Давайте теперь в дочернем компоненте сделаем кнопку, которая будет обрабатывать клик по ней:

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

Сделаем обработчик клика:

components/User.vuemethods: {
  handle() {
    
  }
}

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

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}