Vue: Le rendu d'un composant chargé asynchrone entraîne un changement d'attrs.

Créé le 16 sept. 2019 · 4Commentaires · Source: vuejs/vue

Version

2.6.10

Lien de reproduction

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

Étapes à suivre pour reproduire

Créez un composant avec une fonction de rendu qui peut rendre un autre composant après le temps.
Le rendu du composant après la résolution / le délai d'expiration de la promesse entraîne deux fois le rendu et un changement de $attrs si le composant enfant a un accessoire avec une clé égale à attr.
Commentez prop dans targetComponent et rechargez la page.
Tous les attrs vont bien à nouveau.

Qu'attend-on?

La fonction de rendu est appelée une fois et $attrs du composant ne sont pas modifiés.

Que se passe-t-il réellement?

Le rendu est appelé deux fois et attrs qui a la même clé que props du composant enfant sont supprimés.

J'ai créé sur mon projet un composant de chargeur personnalisé qui doit gérer le chargement de composants chargés paresseusement et les erreurs de mise en réseau, car je ne peux pas utiliser https://vuejs.org/v2/guide/components-dynamic-async.html#Handling -Loading -État dans mon cas. Ce bogue peut être ignoré en n'ajoutant pas de composant téléchargé à la réactivité (données externes comme variable).

bug has workaround

Source

Mighty683

Tous les 4 commentaires

L'utilisation d'une copie de $attrs : {...this.$attrs} supprime également le problème

posva le 17 sept. 2019

❤1

Vous devriez peut-être utiliser des accessoires pour résoudre ce problème ：

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

parce que vous essayez d'obtenir des accessoires

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 le 20 sept. 2019

👍1

La création de la copie d'attrs et le passage avec des accessoires résolvent mon problème, mais je suis toujours curieux de savoir pourquoi le composant parent $attrs change à cause du rendu enfant qui contient des accessoires avec la même clé?

Mighty683 le 22 sept. 2019

C'est parce que l'objet $attrs est réaffecté. Je savais que j'avais déjà vu ce problème ailleurs:
Duplicata de https://github.com/vuejs/vue/issues/10115

posva le 22 sept. 2019

Cette page vous a été utile?

0 / 5 - 0 notes