Escuchar eventos comunes en Click para elemento botón y componente RouterLink en Vue2

Question

En el siguiente código, component podría ser button, input o RouterLinkY no sabemos de antemano cuál será. He añadido muchos atributos para prevenir v-if solución, porque en este caso necesitamos duplicar la mayoría de atributos: {{ lettering }} El @click.prevent= $emit('click', $event.target)  no trabajar para RoterLink. Sin embargo, con @click.native.prevent= $emit('click', $event.target)  nosotros [Vue warn]: The .native modifier for v-on is only valid on components but it was used on . ¿Cómo resolver este conflicto?

coderchampion · Accepted Answer

Se pone difícil cuando usted tiene un componente dinámico que puede o no ser un elemento nativo. Desafortunadamente no hay manera fácil de hacer esto en la plantilla solo, usted tendrá que hacerlo en el código (v-on sintaxis del objeto no admite eventos nativos).

Sin probar, pero algo así puede funcionar:

components: {
  Root: {
    functional: true,

    render(h, ctx) {
      const { data, parent, children } = ctx
      const tag = parent.rootElementTagOrComponentName

      const click = e => {
        e.preventDefault()
        parent.$emit('click', e.target)
      }

      if (tag === 'RouterLink') {
        data.nativeOn = data.nativeOn || {}
        data.nativeOn.click = click
      } else {
        data.on = data.on || {}
        data.on.click = click
      }

      return h(tag, data, children)
    }
  }
}

Todo lo que he hecho en código es tratar de registrar el evento de clics, pero podrías mover otras cosas en código también si quieres.

Respondida el Dec 17, 2020 a las 03:44 - por coderchampion

Gpt · Answer

Para manejar los eventos comunes de click para un elemento botón y un componente RouterLink en Vue2, puedes utilizar la siguiente estrategia:

Define un método para manejar el evento de click en tu componente Vue.

Dentro de este método, determina el tipo de elemento con el que estás trabajando (button o RouterLink) y realiza las acciones necesarias en consecuencia.

Elimina la declaración de `@click.prevent="$emit('click', $event.target)"` y en su lugar, simplemente llama a tu método de manejo de click en el evento click del elemento.

Aquí te dejo un ejemplo de cómo podrías implementar esto en Vue2:

html

Con esta implementación, el método handleClick determinará si el elemento es un botón o un RouterLink y realizará las acciones correspondientes según sea el caso. De esta manera, puedes manejar de forma efectiva los eventos de click en diferentes tipos de elementos en Vue2.

Respondida el Dec 18, 2020 a las 03:39 - por Gpt

Votos positivos: 0 | Votos negativos: 0

Gemini · Answer

Para escuchar eventos comunes en elementos de botón y componentes RouterLink en Vue.js 2, puedes utilizar el siguiente enfoque:

Crea un manejador de eventos personalizado:

Define un manejador de eventos personalizado en el componente padre que encapsula el botón o RouterLink. Por ejemplo:

javascript
   methods: {
     handleClick(event) {
       // Código para manejar el evento de clic
     }
   }

Vincula el manejador de eventos en el botón o RouterLink:

En el botón o RouterLink, vincula el manejador de eventos personalizado al evento de clic. Por ejemplo:

html

html
   ...

Emite el evento de clic desde el botón o RouterLink:

En el botón o RouterLink, emite el evento de clic cuando se hace clic en él. Por ejemplo:

html

html
   ...

Escucha el evento de clic en el componente padre:

En el componente padre, escucha el evento de clic emitido desde el botón o RouterLink. Por ejemplo:

html

javascript
   export default {
     methods: {
       handleClick(event) {
         // Código para manejar el evento de clic
       }
     }
   }

Con este enfoque, puedes escuchar eventos de clic en elementos de botón y componentes RouterLink y manejarlos en un lugar centralizado en el componente padre. Esto te permite evitar la duplicación de código y mantener una estructura de componentes limpia.

Respondida el Dec 18, 2020 a las 03:53 - por Gemini

Escuchar eventos comunes en Click para elemento botón y componente RouterLink en Vue2

3 Respuestas: