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.