Ausgabefunktion in Vue.js

Vue-Komponenten verfügen über eine $emit()Funktion , mit der Sie benutzerdefinierte Ereignisse im Komponentenbaum nach oben übergeben können.(1)

Im Allgemeinen benachrichtigt die emit-Funktion die übergeordnete Komponente, dass sich in der untergeordneten Komponente etwas geändert hat.

Ich werde mit einem Beispiel tief in die Funktion emittieren.

Ich habe eine untergeordnete Komponente als <SearchJokes /> . Es ist eine Komponente, die die Witze als Eingabe filtert. Die Witze sind nur eine große Auswahl, die alle gängigen Witze enthält.

Meine übergeordnete Komponente ist index.vue.js.

Um meine gesamten Witzdaten filtern zu können, muss ich die Daten in meiner übergeordneten Komponente ändern, da ich alle Witzdaten in der übergeordneten Komponente über Axios Fetch habe. Aus diesem Grund muss ich eine Funktion von searchJokes in den Index bringen, der untergeordnete Komponente zur übergeordneten Komponente ist.

Die SearchJokes-Komponente hat eine Eingabe, diese Eingabe enthält nur Text, den wir dort eingeben. Mit diesem Text könnten wir ein großes Array filtern, das wir in der übergeordneten Komponente haben.

Dies ist unser SearchJokes (Kindkomponente).

Wie Sie in Zeile 20 des obigen Bildes sehen können, haben wir die Funktion this.$emit('search-text', this.text).

Diese Funktion ist nur eine übertragbare Funktion zur übergeordneten Komponente. Dies bedeutet, dass wir eine Suchtextfunktion in der übergeordneten Komponente haben. Schauen wir uns die übergeordnete Komponente an, die wir dort haben.

Wenn Sie sich die folgenden Bilder ansehen, habe ich 2 wichtige Dinge über die untergeordnete Komponente. <SerachJokes v-on:search-text="searchText"/>

wie Sie sich bei der untergeordneten Komponente erinnern, haben wir den Namen search-text als string beschrieben, hier in der mparent-Komponente muss der Name übereinstimmen, also haben wir es hier beschrieben;

v-on:search-text als searchText, was bedeutet, dass wir einen neuen Namen namens searchText haben, den wir in die übergeordnete Komponente schreiben müssen. Übrigens ist v-on nur Ereignis-Listening, was bedeutet, dass wir das Suchtext-Ereignis in unserem übergeordneten Methodennamen searchText-Methode abhören.

Außerdem hätten wir den gleichen Namen in die untergeordnete Komponente wie searchText einfügen können, wie this.$emit('searchText', this.text). Das könnte genauso funktionieren, wie wir Suchtext eingeben, es ist nur ein Name, den wir unserer Methode geben.

searchText-Methode, die ich zum Ausfüllen der übergeordneten Komponente brauche.

Nachdem wir unsere searchText-Methode beschrieben haben, sind wir alle bereit, unsere neue Filterfunktion zu verwenden. Ich habe einen schlechten Filter eingegeben, der mir alle Witze enthält, die schlechte Wörter enthalten.

Ich habe dieses Beispiel eines Youtube-Videos von Travery Media genommen. Der Link befindet sich in den Ressourcen.

Ressourcen:

Ressource (1)