So verwenden Sie Vue-Komponenten und verwenden Funktionen wieder

Dieses Mal zeige ich Ihnen, wie Sie Vue-Komponenten und Wiederverwendungsfunktionen verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Vue-Komponenten und Wiederverwendungsfunktionen gelten. Hier sind praktische Fälle, schauen wir uns das an.

1. Was ist eine Komponente

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 Routing-Änderungen 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
- Überprüfen Sie die Durchführbarkeit des Wechsels
- Komponenten wiederverwenden, die nicht aktualisiert wurden
- 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);
}

写在最后

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

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

推荐阅读：

怎么解决Angular5升级RxJS到5.5.3报错问题

使用vue技术容易忽略的7个点

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