0
1K
VistasVue3: compruebe si el detector de eventos está vinculado a la instancia del componente
Tengo un componente Badge reutilizable. Quiero poder agregar un botón cerrar/eliminar cuando un detector de eventos onDelete esté presente en la instancia del componente.
<template> <div class="flex inline-flex items-center px-2.5 py-0.5 text-xs font-medium select-none" :class="[square ? '' : 'rounded-full']"> <slot /> <button class="cursor-pointer ml-2" @click="$emit('onDelete')"> <XIcon class="flex-shrink-0 h-3.5 w-3.5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> </button> </div> </template> <script> import { XIcon } from '@heroicons/vue/solid'; export default { props: { color: { type: String }, square: { type: Boolean, default: false }, }, components: { XIcon, }, emits: ['onDelete'], }; </script>Si agrego una declaración v-if al botón, el evento de emisión se ejecuta inmediatamente
<button v-if="$emit('onDelete')" class="cursor-pointer ml-2" @click="$emit('onDelete')">estoy usando vue 3
1 Respuestas
Responde la pregunta0
ACTUALIZACIÓN: si su componente está utilizando la nueva opción de emisión en Vue3, que es la mejor práctica recomendada de los documentos de Vue3, los detectores de eventos no serán parte de $attrs . Se enviará un problema al equipo de Vue para obtener aclaraciones y orientación sobre por qué esto se comporta de esta manera .
He simplificado su ejemplo anterior en StackBlitz para aislar la funcionalidad que busca.
Nota importante, estoy usando Vue 3.2.26.
En Vue3 se eliminaron $oyentes .
Los detectores de eventos ahora forman parte de $attrs . Sin embargo, simplemente registre this.$attrs en Badge no mostrará la clave que está buscando, están dentro de targets pero se puede acceder a ellos anteponiéndolos on nombre del evento vinculado. En tu caso en el componente Badge onOnDelete .
Ejemplo de trabajo completo con Two Badges. Uno se mostrará porque tiene un evento enlazado onDelete , el otro no lo hará porque el enlace onDelete no está presente.
https://stackblitz.com/edit/vue-8b6exq?devtoolsheight=33&file=src/components/Badge.vue