So aktualisieren Sie Komponenten in vue.js

So aktualisieren Sie Komponenten in vue.js: Fügen Sie zuerst das Schlüsselattribut zum Tag [router-view] hinzu und fügen Sie den schlüsselgebundenen Wert in den Statusverwaltungscontainer ein. Lösen Sie dann die Änderung des Schlüsselwerts durch Mutationen oder Aktionen aus der Zustandsverwaltungscontainer.

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

vue.js-Methode zum Aktualisieren von Komponenten:

Während des Entwicklungsprozesses, d. h. nach der Eingabe von Daten in die in meinem Router gerenderte Komponente, ist ein Problem aufgetreten -view: Ich klicke auf die Schaltfläche „Router-Link“ in der Navigationsleiste außerhalb der Routing-Ansicht, um die Daten in der Router-Ansicht zu löschen, was bedeutet, dass die Komponente neu gerendert wird.

vm.$forceUpdate() Diese Methode ermöglicht das erneute Rendern der Komponente, wenn die aktuelle Komponente diese Methode aufruft. Fügen Sie das Schlüsselattribut zum Router-View-Tag hinzu, platzieren Sie den an den Schlüssel gebundenen Wert im Zustandsverwaltungscontainer und lösen Sie Änderungen am Schlüsselwert durch Mutationen oder Aktionen des Zustandsverwaltungscontainers aus, um den Zweck des erneuten Renderns der Komponente zu erreichen . Der relevante Implementierungscode lautet wie folgt

// store/view.js
const state = {
 viewId: 1
};
const getters = {
 getViewId: state => {
  return state.viewId;
 }
};
const mutations = {
 setViewId: (state, payload) => {
  state.viewId++;
 }
};
const actions = {
 setViewId: (context, payload) => {
  context.commit("setViewId", payload);
 }
};
export default {
 namespaced: true,
 state,
 getters,
 mutations,
 actions
};

Platzieren Sie die Layout-Komponente des Router-Ansichtsetiketts

, um die Ansichts-ID auszulösen, sodass die der Router-Ansicht entsprechende Routing-Komponente aktualisiert wird, z. B. die Navigationsleistenkomponente .

methods: {
  fresh() {
    this.$store.dispatch("view/setViewId")
  }
}

Verwandte kostenlose Lernempfehlungen: Javascript(Video)

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie Komponenten in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!