Estoy creando un componente de botón en VueJS. Hice un evento dinámico con un accesorio, además de una función de evento y parámetros como accesorios también. Eso funciona bien, el padre puede configurar cualquier evento para activar un método. Sin embargo, también quiero poder establecer modificadores en ese evento, pero no veo la manera de hacerlo. ¿Es posible?
El componente del botón:
<button class="btn" :class="[styles, cssClasses]" role="button" @[event]="onEvent(eventParams)" :disabled="disabled"> <slot></slot> </button>El padre:
<Button :event="'click'" :onEvent="logEvent" :eventParams="'This is a test message'">Test button</Button> Agregar un modificador estático al evento dinámico funciona @[event].prevent=... pero quiero poder configurar el modificador desde un accesorio, o no tenerlo en absoluto.
También intenté configurar un objeto de escucha de eventos, pero tampoco puedo ver una forma de agregar modificadores a esos. Al menos en esta opción puedo pasar el evento y prevenir el incumplimiento a la antigua, como hacían nuestros abuelos.
moveAllListeners() { const me = this return Object.assign({}, this.$listeners, { click(e) { e.preventDefault() me.moveAll() }, mouseenter(e) { console.log('Mouse entered'); } } ) }Los modificadores de eventos no pueden ser dinámicos porque se aplican en "momento de compilación" (cuando se compila la plantilla).
Tendrás que implementar todo esto manualmente; cómo lo hace exactamente depende de usted, pero podría ser algo como esto:
<button @[event]="onEvent"> props: [ 'event', 'eventParams', 'eventPrevent', ], methods: { onEvent(e) { if (this.eventPrevent) { e.preventDefault() } // Use this.eventParams here... } }No estoy seguro de cuáles son sus requisitos, pero parece que este es un mal enfoque desde el principio. ¿Por qué un componente de botón personalizado necesita este tipo de comportamiento? ¿Por qué necesita Button para operar así?
No estoy muy seguro de por qué necesitarías operar tal magia. ¿Puede proporcionar un poco más de información sobre sus requisitos, por favor?
¿Por qué no puedes simplemente hacer esto?
<button class="btn" :class="[styles, cssClasses]" role="button" :disabled="disabled" v-on="$listeners" > <slot></slot> </button> <Button @click="logEvent('This is a test message')"> Test button </Button>La única razón por la que puedo imaginar que requeriría tener esto en un accesorio sería debido a algunas acciones dinámicas configuradas.
Pero podría tener algo como esto en su componente principal:
<template> <Button v-for="(button, i) in dynamicButtons" :key="`button_${i}`" @[button.event]="button.action" > Test button </Button> </template> <script> export default { name: 'Sandbox', data () { dynamicButtons: [ { content: 'Test button 1', event: 'click', action: () => logEvent('Click w/o prevention') }, { content: 'Test button 2', event: 'click', action: (e) => { e.preventDefault() logEvent('Click with prevention') } }, { content: 'Test button 3' event: 'mouseenter', action: logEvent('Mouse entered') } ] }, /* ... */ } </script>