Estoy usando Vue 3.2.4, Vuex 4.0.1 y Quasar 3.1.0 para este proyecto.
He creado un componente personalizado en vue como se muestra a continuación:
<template> <q-input outlined v-model="inputValue" :label="label" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'RobsInput', props: { label: { type: String, required: true }, value: { type: String, required: false } }, emits: ['input'], data: function () { return { inputValue: (this.value ? this.value : ''), open: false } }, mounted() { this.$emit('input', this.inputValue); }, }) </script> Luego lo estaba agregando a una página con alguna validación necesaria y de forma preventiva agregué una propiedad de rules antes de agregar esto a mi componente, como se muestra aquí:
<robs-input v-model="email" label="Email Address" lazy-rules :rules="[ val => val && val.length > 0 || 'Email Address is Required']" /> Lo que es realmente extraño es que las lazy-rules y las propiedades de las rules comenzaron a aplicarse instantáneamente a la entrada q dentro de mi robs-input sin que yo hiciera ningún cambio en el componente personalizado.
¿Vue agrega automáticamente propiedades a q-input porque es el único elemento dentro de mi componente? Parece extraño que haga eso, pero no puedo entender qué más está sucediendo.
Gracias de antemano por cualquier respuesta a esto.
Esto se llama herencia de atributos no prop (doc aquí: https://v3.vuejs.org/guide/component-attrs.html ). Las secciones importantes son:
Cuando un componente devuelve un solo nodo raíz, los atributos que no son prop se agregarán automáticamente a los atributos del nodo raíz.
y
Si no desea que un componente herede automáticamente los atributos, puede configurar heredarAttrs: false en las opciones del componente.
y para el componente de raíces múltiples:
A diferencia de los componentes de un solo nodo raíz, los componentes con varios nodos raíz no tienen un comportamiento automático de pérdida de atributos.