Vue: La representación del componente cargado asíncrono está provocando un cambio de atributos.

Creado en 16 sept. 2019  ·  4Comentarios  ·  Fuente: vuejs/vue

Versión

2.6.10

Enlace de reproducción

https://codesandbox.io/s/vue-template-7hwty

pasos para reproducir

  1. Cree un componente con función de renderizado que pueda renderizar otro componente después de un tiempo.
  2. La representación del componente después de la resolución de la promesa / el tiempo de espera está causando la representación dos veces y el cambio de $attrs si el componente secundario tiene algún objeto con clave igual a attr.
  3. Comentar prop en targetComponent y recargar la página.
  4. Todos los attrs están bien de nuevo.

¿Lo que es esperado?

La función de renderizado se llama una vez y el $attrs del componente no se cambia.

¿Qué está pasando realmente?

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).

bug has workaround

Todos 4 comentarios

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

¿Fue útil esta página
0 / 5 - 0 calificaciones