Im Uniapp-Entwicklungs-Applet erfahren Sie, wie Sie benutzerdefinierte Komponenten schreiben und die Werteübertragung implementieren

Wenn wir Uni-Projekte entwickeln, müssen wir häufig einige gängige Module verwenden, z. B. ein Popup-Fenster und eine Reihe von Schaltflächen. Wenn sie für jede Seite wiederholt geschrieben werden, dauert dies sehr lange und ist nicht gut Für die Wartung und Verwaltung des Systems ist es erforderlich, dass wir es als allgemeines Modul schreiben, um den Zweck eines beliebigen Aufrufs zu erreichen.

Alle Komponenten werden im Komponentenverzeichnis definiert. Wenn Sie dieses Verzeichnis nicht in Ihrem neuen Projekt haben, können Sie es auch selbst erstellen. Das Folgende ist eine definierte Komponentenstruktur (shopwind-multpicker):

components/
  shopwind-multpicker/
  shopwind-multpicker.js
shopwind-multpicker.vue
pages/
static/
App.vue

Jede Komponente ist Nachdem wir die Komponente definiert haben, können wir sie in der Ansicht (vue) aufrufen. Das Codebeispiel lautet wie folgt:

<shopwind-multpicker :title="title" idField="region_id" nameField="region_name" parentField="parent_id" :selected="selected" @confirm="confirm"></shopwind-multpicker>

Damit ist die Anzeige einer Komponente abgeschlossen. Wie übergeben wir also den Wert der Komponente an die übergeordnete Komponente? Seite? Durch die Verwendung dieser.$emit-Methode in der Komponentendatei (shopwind-multpicker.vue):

// 组件的vue文件
this.$emit('confirm', '返回父页面的结果集')

Dann müssen Sie auf der übergeordneten Seite eine Methode mit demselben Namen wie der erste Parameter von emit definieren (hier: bestätigen). ) um das Wort zu erhalten. Das Rückgabeergebnis der Komponente. Diese Methode ist in Methoden definiert. Dies unterstützt die dreistufige Verknüpfung, z. B. die regionale Verknüpfung. Das Plug-in wurde für den Dcloud-Plug-in-Markt freigegeben Kostenlos auf dem Plug-in-Markt:

Universelles Paket mit dreistufiger Verknüpfung, das jedes Modell unterstützen kann (z. B. regionale Verknüpfung, Klassifizierungsverknüpfung) – DCloud-Plug-in-Markt

Das obige ist der detaillierte Inhalt vonIm Uniapp-Entwicklungs-Applet erfahren Sie, wie Sie benutzerdefinierte Komponenten schreiben und die Werteübertragung implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!