Как передать ивент из одного компонента в другой?

В Vue.js существует несколько способов передачи ивентов (событий) из одного компонента в другой. Рассмотрим несколько из них:

1. С помощью глобальной шины событий (Event Bus):

Вы можете создать экземпляр нового vue-объекта в файле eventBus.js, который будет служить глобальной шиной событий для вашего приложения:

   import Vue from 'vue'
   export const eventBus = new Vue()

Затем в компоненте, в котором вы хотите запустить событие, вы можете использовать eventBus.$emit:

   import { eventBus } from './eventBus.js'

   export default {
     methods: {
       handleClick() {
         eventBus.$emit('custom-event', data)
       }
     }
   }

А в компоненте, который ожидает событие, вы можете использовать eventBus.$on:

   import { eventBus } from './eventBus.js'

   export default {
     created() {
       eventBus.$on('custom-event', this.handleCustomEvent)
     },
     methods: {
       handleCustomEvent(data) {
         // обработка события
       }
     }
   }

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

2. Через событийые пропсы:

В Vue.js можно передавать события из дочернего компонента в родительский, используя событийные пропсы. Дочерний компонент может воздать событие с помощью $emit, и родительский компонент может прослушивать это событие с помощью директивы v-on или сокращенной записи @.

В дочернем компоненте:

   export default {
     methods: {
       handleClick() {
         this.$emit('custom-event', data)
       }
     }
   }

В родительском компоненте:

   export default {
     methods: {
       handleCustomEvent(data) {
         // обработка события
       }
     }
   }

   <template>
     <child-component @custom-event="handleCustomEvent"></child-component>
   </template>

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

3. Через хуки жизненного цикла:

В некоторых случаях вы можете передать событие из дочернего компонента в родительский, используя методы жизненного цикла компонента, такие как mounted или created. Вы можете вызвать метод родительского компонента непосредственно из метода дочернего компонента.

В дочернем компоненте:

   export default {
     mounted() {
       this.$parent.handleCustomEvent(data)
     }
   }

В родительском компоненте:

   export default {
     methods: {
       handleCustomEvent(data) {
         // обработка события
       }
     }
   }

Хотя этот подход может быть полезным в некоторых случаях, он может сделать код менее структурированным и трудным для отслеживания.

Какой метод использовать, зависит от конкретных требований вашего проекта и личных предпочтений.