Wenden Sie „Provide“ und „Inject“ an, um die Vue-Seitenmethode zu aktualisieren

Methode 1: Rufen Sie die Funktion direkt auf

Laden Sie die gesamte Seite neu. Eine der folgenden Möglichkeiten funktioniert:

1.Fenster.Standort.neu laden()

2. this.$router.go()

Methode 2: Verwenden Sie provide / inject (statische Aktualisierung)

Deklarieren Sie eine Reload-Refresh-Funktion in der übergeordneten Funktion

<Vorlage>
  <div id="app" v-if="anzeigen"></div>
</Vorlage>
<Skript>
Standard exportieren {
  //Anzeigen/Ausblenden steuern, Daten aktualisieren () implementieren {
    zurückkehren {
      zeigen: wahr
    }
  },
  // Übergebe die Refresh-Methode an die Low-Level-Komponente provide () {
    zurückkehren {
      neu laden: this.reload
    }
  },
  Methoden: {
    // Die Komponente auf hoher Ebene definiert die Aktualisierungsmethode reload () {
      this.bol = falsch
      dies.$nextTick(() => {
        this.bol = wahr
      })
    }
  }
}
</Skript>

Verwenden von Aktualisierungsfunktionen in Low-Level-Komponenten

<Vorlage>
  <div></div>
</Vorlage>
<Skript>
Standard exportieren {
  injizieren: ['neu laden'],
  Methoden: {
    // Low-Level-Komponente, aktualisieren fun () {
      dies.neu laden()
    }
  }
}
</Skript>

Vorteile Vergleich

• Der direkte Aufruf der Funktion in Methode 1 führt dazu, dass die gesamte Website aktualisiert wird, was zu Leistungseinbußen und einer schlechten Benutzererfahrung führt. Bei großen Websites müssen Sie einige Sekunden warten, bis die Aktualisierungsanimation in der oberen linken Ecke des Browsers angezeigt wird.
• Methode 2 verwendet „Bereitstellen“/„Einfügen“, sodass Benutzer die Aktualisierung nicht spüren und der aktualisierte Seiteninhaltsbereich gesteuert werden kann, wodurch weniger Leistung verloren geht.

Oben sind die Details der Methode zum Anwenden von „provide“ und „inject“ zum Aktualisieren der Vue-Seite aufgeführt. Weitere Informationen zum Aktualisieren der Vue-Seite finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!