Для передачи событий из дочернего компонента в родительский в Vue.js 3 можно использовать новый синтаксис, основанный на директиве v-on. Этот синтаксис был введен вместо v-on:, который использовался в более ранних версиях Vue.
Итак, чтобы передать событие из дочернего компонента в родительский, необходимо выполнить следующие шаги:
1. В дочернем компоненте создайте событие с помощью метода emits. Например, если вы хотите передать событие myEvent, напишите следующую строку кода в своем компоненте:
emits: ['myEvent']
2. В дочернем компоненте назначьте событию метод, который будет вызван при его возникновении. Например:
methods: {
handleClick() {
this.$emit('myEvent', 'Hello from child component!');
}
}
3. В родительском компоненте добавьте слушатель события, определенного в дочернем компоненте. Сделать это можно с помощью директивы v-on. Например:
<template>
<div>
<ChildComponent v-on:myEvent="handleEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleEvent(message) {
console.log(message);
}
}
}
</script>
В этом примере мы добавляем дочерний компонент <ChildComponent> и назначаем обработчик события handleEvent, который принимает сообщение от дочернего компонента и выводит его в консоль.
4. В дочернем компоненте вызовите метод, который инициирует событие при возникновении необходимого события. Например, чтобы вызвать событие myEvent, добавьте следующую строку кода в место, где это нужно:
<button @click="handleClick">Click me</button>
При нажатии на кнопку в дочернем компоненте будет вызван метод handleClick, который в свою очередь вызовет событие myEvent с переданным сообщением.
В результате, при возникновении события в дочернем компоненте, оно будет передано в родительский компонент, где вы сможете обработать его с помощью метода handleEvent или другим способом, соответствующим вашим требованиям.