Излъчване на събития във 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');
  }
}