Vue: Das Rendern einer asynchron geladenen Komponente führt zu einer Änderung der Attribute.

Erstellt am 16. Sept. 2019 · 4Kommentare · Quelle: vuejs/vue

Ausführung

2.6.10

Reproduktionslink

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

Schritte zum Reproduzieren

Erstellen Sie eine Komponente mit einer Renderfunktion, die nach einiger Zeit eine andere Komponente rendern kann.
Das Rendern der Komponente nach der Auflösung / dem Timeout des Versprechens führt zu einem zweimaligen Rendern und einer Änderung von $attrs wenn die untergeordnete Komponente eine Requisite mit einem Schlüssel gleich attr hat.
Kommentieren Sie die Requisite in targetComponent und laden Sie die Seite neu.
Alle attrs sind wieder in Ordnung.

Was wird erwartet?

Die Renderfunktion wird einmal aufgerufen und $attrs der Komponente werden nicht geändert.

Was passiert eigentlich?

Das Rendern wird zweimal aufgerufen und attrs dem gleichen Schlüssel wie props der untergeordneten Komponente wird entfernt.

Ich habe in meinem Projekt eine benutzerdefinierte Loader-Komponente erstellt, die das Laden von verzögert geladenen Komponenten und Netzwerkfehlern behandeln muss, da ich https://vuejs.org/v2/guide/components-dynamic-async.html#Handling -Loading nicht verwenden kann -Staat in meinem Fall. Dieser Fehler kann behoben werden, indem der Reaktivität keine heruntergeladene Komponente hinzugefügt wird (externe Daten als Variable).

bug has workaround

Quelle

Mighty683

Alle 4 Kommentare

Durch die Verwendung einer Kopie von $attrs : {...this.$attrs} wird das Problem ebenfalls behoben

posva am 17. Sept. 2019

❤1

Vielleicht sollten Sie Requisiten verwenden, um dieses Problem zu lösen:

  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");
    }
  }

weil du versuchst Requisiten rein zu bekommen

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);
  }
};

joe223 am 20. Sept. 2019

👍1

Sowohl das Erstellen des Kopierens von Attributen als auch das Übergeben mit Requisiten lösen mein Problem, aber ich bin immer noch neugierig, warum sich die übergeordnete Komponente $attrs ändert, weil untergeordnete Komponenten gerendert werden, die Requisiten mit demselben Schlüssel enthalten.

Mighty683 am 22. Sept. 2019

Dies liegt daran, dass das Objekt $attrs neu zugewiesen wird. Ich wusste, dass ich dieses Problem schon woanders gesehen habe:
Duplikat von https://github.com/vuejs/vue/issues/10115

posva am 22. Sept. 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen