Vue: A renderização do componente carregado de forma assíncrona está causando alterações nos atributos.

Criado em 16 set. 2019 · 4Comentários · Fonte: vuejs/vue

Versão

2.6.10

Link de reprodução

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

Passos para reproduzir

Crie um componente com a função de renderização que pode renderizar outro componente após o tempo.
O componente de renderização após a resolução / tempo limite da promessa está causando a renderização duas vezes e a alteração de $attrs se o componente filho tiver qualquer prop com chave igual a attr.
Comentário prop em targetComponent e página de recarregamento
Todos os atributos estão bem novamente.

O que é esperado?

A função Render é chamada uma vez e $attrs do componente não é alterado.

O que realmente está acontecendo?

Render é chamado duas vezes e attrs que tem a mesma chave de props do componente filho é removido.

Eu criei no meu projeto o componente carregador personalizado que precisa lidar com o carregamento de componentes carregados lentamente e erros de rede, porque não posso usar https://vuejs.org/v2/guide/components-dynamic-async.html#Handling -Loading -Estado no meu caso. Este bug pode ser omitido ao não adicionar o componente baixado à reatividade (dados externos como variáveis).

bug has workaround

Fonte

Mighty683

Todos 4 comentários

Usar uma cópia de $attrs : {...this.$attrs} também remove o problema

posva em 17 set. 2019

❤1

Talvez você deva usar adereços 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 você está tentando obter adereços

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 em 20 set. 2019

👍1

Tanto a criação de cópia de attrs quanto a passagem de props resolvem meu problema, mas ainda estou curioso por que o componente pai $attrs está mudando por causa da renderização de child que contém props com a mesma chave?

Mighty683 em 22 set. 2019

É porque o objeto $attrs foi reatribuído. Eu sabia que já vi esse problema em outro lugar:
Duplicado de https://github.com/vuejs/vue/issues/10115

posva em 22 set. 2019

Esta página foi útil?

0 / 5 - 0 avaliações