So verwenden Sie die Wiederverwendungsfunktion von Vue-Komponenten richtig

Dieses Mal zeige ich Ihnen, wie Sie die Wiederverwendungsfunktion von Vue-Komponenten richtig verwenden und welche Vorsichtsmaßnahmen für die korrekte Verwendung der Wiederverwendungsfunktion von Vue-Komponenten gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

1. Was ist eine Komponente?

Komponente ist eine 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('my-component',{
  template: '<p>这里是组件的内容</p>'
});
var app1 = new Vue({
  el: '#app1'
});

Um diese Komponente in der übergeordneten Instanz zu verwenden, müssen Sie sie registrieren, bevor die Instanz erstellt wird. Anschließend können Sie die Komponente in der Form

Die DOM-Struktur der Vorlage muss in einem Element enthalten sein. Wenn sie direkt als „hier ist der Inhalt der Komponente“ geschrieben wird, wird sie nicht ohne „

". (Und die äußerste Ebene kann nur ein Root-Tag

haben)

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: '#app2',
  components:{
   'my-component1': {
     template: '<p>这里是局部注册组件的内容</p>'
   }
  }
});

2.3 Daten müssen eine Funktion sein

Zusätzlich zur Vorlagenoption können Komponenten auch andere Optionen wie Vue-Instanzen verwenden, z. B. Daten, berechnet, 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('my-component3',{
  template: '<p>{{message}}</p>',
  data: function(){
    return {
      message: '组件内容'
    }
  }
});
var app3 = new Vue({
  el: '#app3'
});

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 Änderungen durch beide Parteien 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, wiederverwendbare Komponenten zerlegt, und die Anwendung wird durch Kombinieren von Komponenten gebildet und mit der Routing-Funktion von Vue-Router kombiniert, um jede Komponente der entsprechenden Route zuzuordnen Vue, wo sie durch Änderungen im Routing gerendert werden sollen, und realisiert 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 die entsprechende Artikelseite über die Artikel-ID lädt. Beim ersten Zugriff wird die Post.vue-Komponente in die Komponente gerendert Wenn wir den Artikelinhalt über die Artikel-ID abrufen und auf der Seite anzeigen, ändert sich der Routing-Parameter :postId entsprechend unseren Erwartungen , sollte der Inhalt des neuen Artikels angezeigt werden, aber das geht nach hinten los.

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 „Mount“.

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 Reagieren Sie auf die entsprechenden Daten. Der spezifische Implementierungsprozess ist wie folgt:

Definieren Sie die Datenerfassungsmethode

首先定义一个获取文章的方法，根据文章ID从后台获取对应的文章信息。

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

监听路由

接着是在路由切换的时候判断目标组件是否是Post.vue组件，这里可以根据定义的路由名称name实现，如果是，我们就可以从路由信息中获取目标文章ID来更新组件内容。

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

组件初始化

这里需要注意的是，当组件首次被挂载到组件树上时，对路由的监听是无效的，这时我们需要在生命周期钩子mounted对组件进行初始化工作：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用React高阶组件

如何正确解决Vue 项目中遇到跨域问题

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Wiederverwendungsfunktion von Vue-Komponenten richtig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!