en Vue3 puedo hacer lo siguiente:
Componente principal:
<ChildComponent :props="{ id: 'the-id', class: 'the-class' }" />
Componente secundario:
<template> <input v-bind="props" /> </template> <script> export default { props: { props: { type: Object } } } </script>
Esto dará como resultado un HTML como este:
<input id="the-id" class="the-class" />
Todavía estoy aprendiendo Vue y me preguntaba si podría hacer lo mismo con los detectores/controladores de eventos.
Con componentes reutilizables, es posible que necesite diferentes detectores/controladores de eventos, dependiendo de dónde use el componente. En una forma, podría necesitar solo un @input="..."
en el componente secundario, en otra forma, también podría necesitar un @blur="..."
o podría no necesitar un detector de eventos en absoluto.
¿Es posible hacer algo similar a esto?
Componente principal:
<ChildComponent :events="{ input: function() { alert('input!'); }, blur: function() { alert('blur!'); } } />
Componente secundario:
<template> <input @events /> </template> <script> export default { props: { props: { type: Object } } } </script>
Gracias ;)
También puedes hacer algo similar a lo que hiciste con los accesorios, pasando un objeto a v-on
:
<input v-on="{ input: doThis, blur: doThat }"></button>
Consulte aquí: https://v3.vuejs.org/api/directives.html#v-on
El elemento raíz de un componente hereda automáticamente todos los atributos no prop (incluidos los detectores de eventos) aplicados al componente del padre. Entonces, si <input>
estuviera realmente en la raíz de ChildComponent
, no necesitaría declarar nada y simplemente podría aplicar atributos a ChildComponent
como si fuera la input
en sí:
<ChildComponent id="the-id" class="the-class" @blur="onBlur" />
Sin embargo, esto se romperá tan pronto como agregue otro elemento a ChildComponent
porque <input>
ya no sería la raíz. También sería un problema si quisiera cambiar el elemento raíz (por ejemplo, una <label>
que envuelve la <input>
).
Para deshabilitar la herencia automática de atributos , lo que permite el control de dónde aplicar los atributos heredados, establezca inheritAttrs: false
en las opciones del componente. (No es necesario deshabilitar esto cuando hay varios nodos raíz, ya que solo se aplica a los componentes de una sola raíz). Luego v-bind
manualmente el $attrs
a cualquier elemento dentro de:
<template> <label>My input: <input v-bind="$attrs"></label> </template> <script> export default { inheritAttrs: false, } </script>
Mi recomendación sería definir los diferentes eventos a través de los eventos personalizados de Vue; Los eventos personalizados permitirían a los usuarios del componente elegir a qué evento suscribirse y manejarlo en consecuencia.