Lassen Sie mich im Detail erklären, wie Sie eine vollständige Seiten- oder Teilaktualisierung in Vue implementieren

Wie implementiert man eine Seitenaktualisierung in Vue? Der folgende Artikel stellt Ihnen vor, wie Sie eine vollständige Seitenaktualisierung und eine teilweise Aktualisierung in Vue implementieren. Ich hoffe, er wird Ihnen hilfreich sein!

1. Vollständige Seitenaktualisierung

1. Ändern Sie App.vue. Der Code lautet wie folgt:

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: &#39;App&#39;,
  provide() { // 父组件中返回要传给下级的数据
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

Die wichtigsten Punkte sind in der folgenden Abbildung dargestellt:

2 Das muss aktualisiert werden und zum Importieren und Referenzieren verwendet werden. Rufen Sie this.reload() in der Methode auf, die aufgerufen werden muss. Teilweise Aktualisierung Variable isReloadData und binden Sie die Variable an die Daten, die aktualisiert werden müssen. Auf dem Etikett:

2. Definieren Sie die Methode der teilweisen Aktualisierung reloadPart:

3. Rufen Sie sie in der Methode auf, die benötigt wird um eine teilweise Aktualisierung durchzuführen

3. Anwendungsszenarien

Wenn einige Daten auf der Seite dynamisch geändert werden, oder von Requisiten eingebrachte Daten oder durch Funktionen dynamisch festgelegte Attribute, werden die neuesten Daten nach der Änderung möglicherweise nicht angezeigt.

Wenn sich die Seitendaten ändern, treten Fehler beim Rendern der Seite auf. Beispielsweise wird ein leerer Bereich angezeigt, nachdem sich die Daten der El-Table-Komponente geändert haben.

Zu diesem Zeitpunkt ist eine vollständige Seitenaktualisierung oder eine teilweise Aktualisierung hilfreich. Der Screenshot unten ist ein Beispiel für die zweite Situation, die durch die Verwendung einer vollständigen Seitenaktualisierung und einer teilweisen Aktualisierung gelöst wurde:

1 Standardmäßig und normales Rendern der Seite:

• 2. Markieren Sie eine Anzeigespalte und die Seite wird normal gerendert:

3. Überprüfen Sie die markierte Anzeigespalte erneut und es erscheint ein leerer Bereich:

Zu diesem Zeitpunkt müssen Sie nur die teilweise Aktualisierungsmethode this.reloadPart() in der Einzelauswahlmethode aufrufen, um das Problem zu lösen. Das Gleiche gilt für die Allauswahl.

4. Jedes Mal, wenn eine neue Anzeigespalte hinzugefügt wird, wird ein leerer Bereich in der Tabelle angezeigt. Zu diesem Zeitpunkt müssen wir nur die vollständige Seitenaktualisierungsmethode this.reload() aufrufen, nachdem der neue Datensatz erfolgreich hinzugefügt wurde.

【Verwandte Empfehlung: „vue.js Tutorial

“】

Das obige ist der detaillierte Inhalt vonLassen Sie mich im Detail erklären, wie Sie eine vollständige Seiten- oder Teilaktualisierung in Vue implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!