Vue: Merender komponen yang dimuat asinkron menyebabkan perubahan attrs.

Dibuat pada 16 Sep 2019 · 4Komentar · Sumber: vuejs/vue

Versi: kapan

2.6.10

Tautan reproduksi

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

Langkah-langkah untuk mereproduksi

Buat komponen dengan fungsi render yang dapat merender komponen lain setelah waktu.
Merender komponen setelah penyelesaian janji / waktu tunggu menyebabkan render dua kali dan perubahan $attrs jika komponen anak memiliki prop dengan kunci sama dengan attr.
Prop komentar di targetComponent dan muat ulang halaman.
Semua attrs baik-baik saja lagi.

Apa yang diharapkan?

Fungsi render dipanggil sekali dan $attrs komponen tidak berubah.

Apa yang sebenarnya terjadi?

Render dipanggil dua kali dan attrs yang memiliki kunci yang sama dengan props komponen anak dihapus.

Saya membuat komponen pemuat khusus proyek saya yang harus menangani pemuatan komponen yang dimuat lambat dan kesalahan jaringan, karena saya tidak dapat menggunakan https://vuejs.org/v2/guide/components-dynamic-async.html#Handling -Loading -Negara dalam kasus saya. Bug ini dapat dihilangkan dengan tidak menambahkan komponen yang diunduh ke reaktivitas (di luar data sebagai variabel).

bug has workaround

Sumber

Mighty683

Semua 4 komentar

Menggunakan salinan $attrs : {...this.$attrs} juga menghilangkan masalah

posva pada 17 Sep 2019

❤1

Mungkin Anda harus menggunakan alat peraga untuk menyelesaikan masalah ini ：

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

karena Anda mencoba memasukkan properti

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 pada 20 Sep 2019

👍1

Baik membuat penyalinan attrs dan meneruskan dengan props menyelesaikan masalah saya, tetapi saya masih penasaran mengapa komponen induk $attrs berubah karena merender anak yang berisi props dengan kunci yang sama?

Mighty683 pada 22 Sep 2019

Itu karena objek $attrs dipindahkan. Saya tahu saya sudah melihat masalah ini di tempat lain:
Duplikat dari https://github.com/vuejs/vue/issues/10115

posva pada 22 Sep 2019

Apakah halaman ini membantu?

0 / 5 - 0 peringkat