So implementieren Sie die Wiederverwendung von Vue-Komponenten in tatsächlichen Projekten

Dieses Mal zeige ich Ihnen, wie Sie Vue-Komponenten in praktischen Projekten wiederverwenden. Welche Vorsichtsmaßnahmen gibt es für die Wiederverwendung von Vue-Komponenten in praktischen Projekten?

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 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 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 Artikel sollte angezeigt werden, aber es 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 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örroute

接着是在路由切换的时候判断目标组件是否是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);
}

写在最后

通过上面的方法就可以实现组件内容随路由参数的变化而更新了，有效解决了vue-router组件复用导致路由参数失效的问题。

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

推荐阅读：

vue项目中watch的immediate使用

create-react-app配置eslint步骤详解

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Wiederverwendung von Vue-Komponenten in tatsächlichen Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!