2.6.10
https://codesandbox.io/s/vue-template-7hwty
$attrs
si el componente secundario tiene algún objeto con clave igual a attr.La función de renderizado se llama una vez y el $attrs
del componente no se cambia.
Render se llama dos veces y se eliminan attrs
que tiene la misma clave que props
del componente secundario.
Creé en mi proyecto el componente de cargador personalizado que tiene que manejar la carga de componentes cargados perezosamente y errores de red, porque no puedo usar https://vuejs.org/v2/guide/components-dynamic-async.html#Handling -Loading -Estado en mi caso. Este error se puede omitir al no agregar el componente descargado a la reactividad (datos externos como variable).
Usar una copia de $attrs
: {...this.$attrs}
también elimina el problema
Tal vez debería usar accesorios para resolver este problema:
render(h) {
console.log("Attributes of loader:", this.$attrs);
if (this.targetComponent) {
return h(this.targetComponent, {
props: this.$attrs // Change attrs to props,not `attrs: this.$attrs`
});
} else {
return h("div", "Component is loading");
}
}
porque estás tratando de conseguir accesorios
const targetComponent = {
props: {
// COMMENT PROP
someProp: {
type: String
}
},
render(h) {
console.log("Props of target", this.$props); // You can not get $props when render params only has attrs
return h("div", "WITH PROP:" + this.someProp);
}
};
Tanto la creación de copias de atributos como la transferencia con accesorios resuelven mi problema, pero todavía tengo curiosidad por saber por qué el componente principal $attrs
está cambiando debido a la representación del niño que contiene accesorios con la misma clave.
Es porque el objeto $attrs
está reasignado. Sabía que ya vi este problema en otro lugar:
Duplicado de https://github.com/vuejs/vue/issues/10115