Detaillierte Erläuterung der Vue-Komponenten und deren Wiederverwendung

Komponente ist eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. In diesem Artikel werden hauptsächlich Vue-Komponenten und die Wiederverwendung vorgestellt. Freunde in Not können sich auf

beziehen. 1. Was ist eine Komponente? einer der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln.

2. Komponentennutzung

Komponenten müssen registriert werden, bevor sie verwendet werden können: globale Registrierung und lokale Anmeldung. 2.1 Nach der globalen Registrierung kann jede V ue-Instanz verwendet werden. Zum Beispiel:

 <p id="app1">
      <my-component></my-component>
    </p>
Vue.component(&#39;my-component&#39;,{
  template: &#39;<p>这里是组件的内容</p>&#39;
});
var app1 = new Vue({
  el: &#39;#app1&#39;
});

Um diese Komponente in der übergeordneten Instanz zu verwenden, müssen Sie sie registrieren, bevor die Instanz erstellt wird, und dann können Sie 0e9bbf67dfe9378c54c6bb9a201786ad

Die DOM-Struktur der Vorlage muss in einem Element enthalten sein, wenn es direkt als „hier ist der Inhalt der Komponente“ geschrieben wird "e388a4556c0f65e1904146cc1a846bee

2.2 In einer Vue-Instanz können Sie die Komponentenoption verwenden, um eine Komponente lokal zu registrieren. Die registrierte Komponente ist nur innerhalb des Gültigkeitsbereichs von gültig die Instanz. Zum Beispiel:

    <p id="app2">
      <my-component1></my-component1>
    </p>
var app2 = new Vue({
  el: &#39;#app2&#39;,
  components:{
   &#39;my-component1&#39;: {
     template: &#39;<p>这里是局部注册组件的内容</p>&#39;
   }
  }
});

2.3 Daten müssen eine Funktion sein

Zusätzlich zur Vorlagenoption können auch andere Optionen in Komponenten wie verwendet werden Vue-Instanzen wie Daten, Berechnungen, Methoden usw. Bei der Verwendung von Daten unterscheidet es sich jedoch geringfügig vom Beispiel. Daten müssen eine Funktion sein und dann werden die Daten zurückgegeben.

    <p id="app3">
      <my-component3></my-component3>
    </p>
Vue.component(&#39;my-component3&#39;,{
  template: &#39;<p>{{message}}</p>&#39;,
  data: function(){
    return {
      message: &#39;组件内容&#39;
    }
  }
});
var app3 = new Vue({
  el: &#39;#app3&#39;
});

Im Allgemeinen sollte das zurückgegebene Objekt nicht auf ein externes Objekt verweisen, denn wenn das zurückgegebene Objekt auf ein externes Objekt verweist, wird dieses Objekt gemeinsam genutzt, und Alle von einer Partei vorgenommenen Änderungen werden synchronisiert.

Daher wird im Allgemeinen ein neues unabhängiges Datenobjekt an die Komponente zurückgegeben.

Ergänzung: Problem bei der Wiederverwendung von Vue-Router-Komponenten

Das Komponentensystem ist ein wichtiger Teil von Vue, der eine komplexe Seite kombinieren kann Die Abstraktion wird in viele kleine, unabhängige und wiederverwendbare Komponenten zerlegt, und die Anwendung wird durch die Kombination der Komponenten zusammengesetzt. In Kombination mit der Routing-Funktion von vue-router wird jede Komponente der entsprechenden Route zugeordnet und die Änderungen im Routing werden zur Erkennung verwendet Vue, wo gerendert werden soll. Sie implementieren die Sprungnavigation zwischen verschiedenen Komponenten und Seiten.

Problem

Wenn Sie Vue-Router zum Wechseln von Routen verwenden, wird die Aktualisierung des Komponentenbaums ausgelöst und ein neuer Komponentenbaum basierend auf der definierten Route gerendert Der ungefähre Umstellungsprozess sieht wie folgt aus: - Unnötige Komponenten deaktivieren und entfernen

- Machbarkeit des Wechsels überprüfen

- Nicht aktualisierte Komponenten wiederverwenden

- Neue Komponenten aktivieren und aktivieren

Informationen zum spezifischen Steuerungsprozess für die Routenumschaltung finden Sie im offiziellen Dokument: Switching Control Pipeline

Wie stellt der Vue-Router fest, dass eine bestimmte Komponente wiederverwendet werden kann? Schauen wir uns die folgende Routing-Konfiguration an:

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

Dies ist die Route, die beim ersten Zugriff die entsprechende Artikelseite über die Artikel-ID lädt , Post.vue this Die Komponente wird in den Komponentenbaum gerendert, der Artikelinhalt wird über die Artikel-ID abgerufen und auf der Seite angezeigt. Wenn wir auf einen anderen Artikel zugreifen, ändert sich der Routing-Parameter: postId. Nach unseren Erwartungen sollte der neue Artikel inhaltlich angezeigt werden, was jedoch nach hinten losging.

Was wir sehen, ist immer noch der vorherige Artikel. Obwohl sich die Routing-Parameter geändert haben, geht Vue-Router davon aus, dass Sie auf die Post.vue-Komponente zugreifen, da die Komponente bereits zuvor gerendert wurde . Verwenden Sie die vorherige Komponente und führen Sie keine Vorgänge in der Komponente aus, einschließlich Lebenszyklusfunktionen wie Mounten.

Am Ende sehen wir also den Inhalt der Originalkomponente.

Wie können wir also den gewünschten Effekt erzielen? Eine effektive Lösung wird unten vorgestellt

Lösung

Wir können den Watch-Listener verwenden, um Routing-Änderungen entsprechend der Routing-Änderung zu überwachen Der spezifische Implementierungsprozess ist wie folgt: Definieren Sie die Datenerfassungsmethode

Definieren Sie zunächst eine Methode zum Abrufen von Artikeln und rufen Sie die entsprechenden Artikelinformationen aus dem Hintergrund ab die Artikel-ID.

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

Hören Sie sich die Route an

Dann besteht der nächste Schritt darin, zu bestimmen, ob die Zielkomponente ein Beitrag ist. Wenn die Route umgeschaltet wird, kann dies anhand des definierten Routing-Namens implementiert werden. Wenn ja, können wir die Zielartikel-ID aus den Routing-Informationen abrufen, um den Komponenteninhalt zu aktualisieren.

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

Komponenteninitialisierung

Was hier beachtet werden muss, ist, dass die Komponente in den Komponentenbaum eingebunden wird Zum ersten Mal ist die Überwachung des Routings ungültig. Zu diesem Zeitpunkt müssen wir die Komponente im Lebenszyklus-Hook initialisieren:

mounted() {
  this.getPost(this.$route.params.postId);
}

Am Ende schreiben

Durch die obige Methode kann der Komponenteninhalt aktualisiert werden, wenn sich die Routing-Parameter ändern, wodurch das Problem ungültiger Routing-Parameter, die durch die Wiederverwendung von Vue-Router-Komponenten verursacht werden, effektiv gelöst wird.

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

JavaScript generiert eine Zeitliste innerhalb eines angegebenen Bereichs

Detaillierte Erläuterung der Parameter basierend auf Webpack. config.js

Nodejs-Methode zum Implementieren des Datei-Uploads basierend auf Express

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue-Komponenten und deren Wiederverwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!