Beispiele für verschiedene Arten von Filterfunktionen, die von Komponenten im Vue-Dokument übergeben werden

Als Frontend-Entwickler müssen wir häufig Vue.js verwenden, um Seiten zu erstellen. In Vue.js sind Komponenten ein sehr wichtiger Bestandteil. Die Übergabe von Werten zwischen Komponenten ist eine sehr häufige Anforderung, und es gibt viele verschiedene Möglichkeiten, Werte zu übergeben. In diesem Artikel konzentrieren wir uns auf die Übertragung von Komponentenwerten in Vue-Dokumenten und die Verwendung verschiedener Arten von Filterfunktionen.

Werte in Komponenten übergeben

In Vue.js gibt es mehrere Möglichkeiten, Werte zwischen Komponenten zu übergeben:

1. props & emit

Verwenden Sie Props, um Daten von übergeordneten Komponenten an untergeordnete Komponenten zu übergeben. Mit emit können Sie die Daten in der untergeordneten Komponente an die übergeordnete Komponente übergeben. Diese Methode wird häufig für die bidirektionale Kommunikation zwischen Komponenten verwendet. Und diese Methode ist sehr praktisch. Sie müssen nur die Daten definieren, die in Requisiten übergeben werden müssen, und die Methode $emit in der Unterkomponente verwenden, um das Ereignis auszulösen.

2. provide & inject

provide & inject ist eine API, die in der Version Vue.js2.2.0 hinzugefügt wurde. Verwenden Sie Provide, um die Daten zu definieren, die übergeben werden müssen, und verwenden Sie Inject, um diese Daten in die Komponente einzufügen. Diese Methode wird häufig verwendet, um Daten über Ebenen hinweg zu übertragen.

3. $parent & $children

Der Komponentenbaum in Vue.js ist ein Tiefendurchlaufprozess. Verwenden Sie $parent, um die Instanz der übergeordneten Komponente abzurufen, und verwenden Sie $children, um die Instanz der untergeordneten Komponente abzurufen. Der Nachteil dieser Methode besteht darin, dass sie nicht flexibel genug und nicht so praktisch ist wie Props & Emit und Provide & Inject.

Verschiedene Arten von Filterfunktionen

Wenn wir Daten filtern oder transformieren müssen, können wir die Filterfunktion in Vue.js verwenden. Die folgenden Arten von Filterfunktionen werden in Vue.js bereitgestellt:

1. Globale Filterfunktion

Globale Filterfunktionen werden über die Methode Vue.filter() definiert. Einmal definiert, kann es in jeder Komponente verwendet werden. Der Vorteil globaler Filterfunktionen besteht darin, dass sie einfach sind und nach ihrer Definition in mehreren Komponenten verwendet werden können. Allerdings wird die globale Filterfunktion mehrfach instanziiert, was bei vielen gefilterten Daten zu einer schlechten Leistung führt.

2. Lokale Filterfunktion

Lokale Filterfunktionen werden in Komponenten definiert. Es kann nur innerhalb dieser Komponente verwendet werden. Der Vorteil dieses Ansatzes ist eine bessere Leistung, da er nur einmal in der Komponente instanziiert werden muss. Der Nachteil besteht darin, dass es sehr begrenzt ist und nur innerhalb der Komponente verwendet werden kann.

3. Reine Funktionsfilterfunktion

Reine Funktionsfilterfunktion bezieht sich auf die Eingabe bestimmter Parameter und die Ausgabe eines bestimmten Ergebnisses, das von keinem externen Zustand beeinflusst wird. Diese Methode ist bequemer anzuwenden und kann einige Nebenwirkungen vermeiden. Allerdings ist zu beachten, dass reine Funktionsfilterfunktionen die Originaldaten nicht verändern können.

Beispiele für Filterfunktionen

Sehen wir uns die Verwendung von Filterfunktionen anhand von Beispielen an. In diesem Beispiel definieren wir eine Komponente, übergeben ein Array an diese Komponente und verwenden die Filterfunktion innerhalb der Komponente, um das Array zu filtern.

<template>
  <div>
    <ul>
      <li v-for="item in filteredData">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item % 2 === 0
      }).map(item => {
        return item * 2
      })
    }
  }
};
</script>

Diese Komponente übergibt Array-Daten und filtert das Array durch die Filterfunktion. Im berechneten Attribut haben wir die Filter- und Map-Methoden von JavaScript verwendet, um die geraden Zahlen im Array zu filtern, und die gefilterten Daten mit 2 multipliziert. Abschließend geben wir die gefilterten Daten zur Anzeige an die Komponente zurück.

Zusammenfassung

Vue.js bietet eine Fülle von Komponentenwertübertragungsmethoden und Filterfunktionen. Wir können je nach Bedarf verschiedene Methoden für die Entwicklung auswählen. Während der Nutzung müssen wir Faktoren wie Leistung, Flexibilität, Wiederverwendbarkeit des Codes usw. umfassend berücksichtigen, um die beste Entwicklungsmethode zu ermitteln.

Das obige ist der detaillierte Inhalt vonBeispiele für verschiedene Arten von Filterfunktionen, die von Komponenten im Vue-Dokument übergeben werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!