Bei der Arbeit an dem Projekt ist mir etwas Seltsames aufgefallen : Die
übergeordnete Komponente <dialog-info/>hat einen Parameter arrdata an die untergeordnete Komponente übergeben , bei der es sich um ein Array handelt.
Da es sich um einen Parameter vom Typ Array handelt, hat die untergeordnete Komponente ihn empfangen, und die Standardeinstellung hat ein leeres Array zurückgegeben Die Funktion und
dann die untergeordnete Komponente wurden routinemäßig überprüft. Haben Sie den Wert normal erhalten? Ich war
schockiert, es stellte sich heraus, dass es sich um ein leeres Array handelte!
Aber die Requisiten im Vue-Debugging-Tool werden normalerweise erhalten. Es ist ein
bisschen interessant. Dann habe ich anhand der Projektstruktur darüber nachgedacht und herausgefunden, wo das Problem liegt.
Das Projekt sieht folgendermaßen aus: Auf
dieser Seite befindet sich die übergeordnete Komponente. Klicken Sie auf die blaue Schaltfläche, um sie hinzuzufügen . Die Rückrufmethode wird ausgelöst, um die <DialogInfo>untergeordnete Komponente anzuzeigen
. Der von der übergeordneten Komponente an die untergeordnete Komponente übergebene Wert arrdatalautet erhalten Sie hier durch asynchrones Hören
und dann gerendert in In dieser Liste:
Hier ist das Problem der Reihenfolge des Ladens von Komponenten. Warum kann ich gerade jetzt keine Daten von den Unterkomponenten abrufen? Denn wenn die untergeordnete Komponente <DialogInfo>geladen wird, hat die übergeordnete Komponente den asynchronen Rückgabewert noch nicht erhalten.
Um den Wert zu erhalten, können wir anhand der übergeordneten Komponente beurteilen. Erst wenn der Wert erhalten wird, dh die Länge des Werts des Arrays, das von der übergeordneten Komponente an die untergeordnete Komponente übergeben wird, ist nicht 0, und dann wird gerendert:
Dadurch wird sichergestellt, dass die untergeordnete Komponente warten muss. Die übergeordnete Komponente bereitet die Daten vor und lädt sie dann. Das Ergebnis:
Es gibt eine Lösung!
Dies geschieht über die <el-dialog>integrierte Methode der elementui- Komponente openedoder die openAusführung der Rückruffunktion. Diese beiden Funktionen werden <el-dialog>nach dem Öffnen der Komponente ausgeführt.
Meine untergeordnete Komponente <dialog-info>ist eine gepackte <el-dialog>Komponente, solange der Dialog geöffnet ist wird in der Rückruffunktion verfügbar sein. Der von der übergeordneten Komponente übergebene Wert!
Die geöffnete Methode ist an die untergeordnete Komponente gebunden:
Definieren Sie eine Rückrufmethode und kehren Sie zurück.
Wenn wir auf die Schaltfläche klicken, wird das Dialogfeld angezeigt
und wir können den Wert in der Rückrufmethode abrufen, da die Daten bereits zu diesem Zeitpunkt abgerufen wurden Zeit:
