Nota A: Esto puede sonar como un duplicado para algunos, pero todas las demás preguntas que he encontrado hasta ahora se refieren a Vue 2 o eventos sin parámetros. Por favor corrígeme si estoy equivocado.
Nota B: esta pregunta puede parecer una solicitud de función, pero no lo es. Acabo de empezar a usar Vue y no sé cómo resolver este problema correctamente.
Mi componente se encuentra dos niveles por debajo de App.vue. Ejecuta este código:
this.$emit('my-event', parameter);
App.vue (dos niveles más arriba) detecta el evento con este código:
@my-event="myFunction"
Pero para que el evento llegue a App.vue, primero tiene que pasar por el componente que se encuentra arriba, así:
Componente secundario > Componente principal > App.vue
El componente principal podría capturar el evento y pasarlo a App.vue de esta manera:
@my-event="$emit('my-event')"
Pero entonces el parámetro se deja fuera.
Otra forma de resolverlo sería (dentro del componente principal):
@my-event="myEvent" myEvent(parameter) { this.$emit('my-event', parameter); }
Pero estoy buscando una forma más simple e intuitiva de pasar por alto el evento. Tal vez algo como esto (dentro del componente principal):
@my-event="$emit('my-event', parameter)"
¿Es esto posible en Vue 3? O algo similar a esto? ¿Cuál es la mejor manera de emitir un evento con parámetros de varios niveles? Cualquier ayuda sería muy apreciada.
Vue proporciona una variable especial llamada $event
que puede usar dentro de la plantilla para obtener el argumento del evento . Entonces, en su caso, puede escribir el controlador de eventos como
@my-event="$emit('my-event',$event)