Informationsübertragung und Funktionsaufrufe zwischen WeChat-Miniprogrammseiten und -Komponenten

In diesem Artikel werde ich die relevanten Inhalte aus den folgenden Perspektiven basierend auf meiner eigenen Entwicklungserfahrung erläutern.

1. So übergeben Sie Daten von der Seite an die Komponente
2. So übergeben Komponenten Daten an die Seite
3. Wie ruft die Seite die Funktion in der Komponente auf?
4. Wie rufen Komponenten Funktionen innerhalb einer Seite auf?
   

1. Wie übergibt die Seite Daten an die Komponente?

Die gebräuchlichste und standardisierte Methode besteht darin, den Datenlistener-Beobachter einzurichten.

Angenommen, die Komponente sc wird auf der Seite eingeführt

"Komponenten verwenden": {
    "sc":""
 }

Um einen Listener zum Überwachen von Änderungen in der Datenliste auf der Seite zu konfigurieren, wird die Komponente wie folgt in die Seite geschrieben:

<sc
Liste="{{Liste}}"
>
</sc>

Der Listener in der Komponente wird wie folgt geschrieben. Jedes Mal, wenn sich der Wert von „list“ auf der Seite ändert, wird der Listener „observer“ ausgelöst und der geänderte Wert wird ausgedruckt.

Eigenschaften:
    Liste:{
      Typ: Array,
      Beobachter: Funktion (neuerWert, alterWert){
        console.log(neuerWert)
      }
    }
}

​ In ähnlicher Weise kann diese Methode neben der dynamischen Wertübertragung auch statische Werte direkt übergeben, d. h. der Obeserver-Listener muss nicht aufgerufen werden. In der Komponente können Sie this.properties.* direkt verwenden, um die Werte in Eigenschaften abzurufen (* steht für den Namen jedes Eigenschaftswerts).

2. Wie übergeben Komponenten Daten an die Seite?

Da Komponenten Listener zum Überwachen von Seitendatenänderungen einrichten können, um den Effekt der Datenübertragung zu erzielen, können Seiten Listener auch zum Überwachen der von Komponenten ausgelösten Informationsübertragung verwenden.

Nehmen wir immer noch die obige Komponente als Beispiel: Wie werden Informationen an die Seite übertragen?

​ Konfigurieren Sie Komponenten-Listener auf der Seite

KomponentenListener(e){
    let info = e.detail;
 }

​ Komponente wählt das Ereignis aus und bindet den Listener

<sc
bind:listener="KomponentenListener"
> 
</sc>

Um Eingaben von einer Komponente an eine Seite zu übergeben, müssen Sie nur das entsprechende Ereignis in der Komponente auslösen. e.detail sind die übergebenen Daten.

 this.triggerEvent('listener',{func,tid});

3. Wie ruft die Seite die Funktion in der Komponente auf?

Angenommen, wir führen eine Komponente „Comment-Bottom“ ein und verwenden sie, die eine Funktion „handleCloseInput“ enthält, die in einer bestimmten Logik ausgelöst werden muss.

Wenn Sie die Funktionen in einer Komponente verwenden möchten, müssen Sie eine eindeutige ID für die Komponente konfigurieren, damit Sie die Komponente über DOM-Operationen auf der Seite auswählen und die Funktionen in der Komponente aufrufen können.

<comment-bottom id="commentBottom"></comment-bottom>

Die Aufruflogik der Funktion in der Komponente auf der Seite ist wie folgt:

dies.commentBottom = dies.selectComponent("#commentBottom");
this.commentBottom.handleCloseInput();

4. Wie ruft eine Komponente eine Funktion auf einer Seite auf?

Die obige Methode zum Übertragen von Daten auf eine Seite ruft tatsächlich eine Funktion auf der Seite auf. Wir können die Logik und Verwendung als Funktionszuordnung verstehen.

<component bind:componentfunc="pagefun"></component>

Wenn ein Trigger zum Auslösen der Komponentenfunktion verwendet wird, wird die Seitenfunktion auf der Seite über die Zuordnungsbeziehung „Bind: Funktion“ ausgelöst.

Zweitens können Sie Funktionen innerhalb einer Seite auch über den Seitenstapel aufrufen. Die Komponente belegt nicht den Stapelspeicherplatz der Seite, sodass Sie in der Komponente getCurrentPages verwenden können, um die Daten und Methoden der entsprechenden Seite abzurufen.

var allpages = getCurrentPages(); //Alle Seitendaten abrufen var nowpage = allpages[allpages.length - 1].data; //Die Daten der aktuellen Seite abrufen.
var nowpage = allpages[allpages.length - 1]; //Seite abrufen, einschließlich Daten und Methoden

​ Dieser Teil des Inhalts stammt aus einem meiner Artikel, ich werde die Adresse in die Referenzdatei einfügen.

Abschluss:

Der Datentransfer zwischen Komponenten unterscheidet sich kaum von dem zwischen Komponenten und Seiten, zudem können Komponenten auch in Komponenten verschachtelt sein.

Verweise

Zusammenfassung der Fähigkeiten zur Entwicklung des WeChat Mini-Programms (I) - Datenübertragung und -speicherung

Dies ist das Ende dieses Artikels über Informationsübertragung und Funktionsaufrufe zwischen WeChat Mini-Programmseiten und -Komponenten. Weitere relevante Inhalte zu WeChat Mini-Programmseiten und -Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den unten stehenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!