Ausführliche Erläuterung der Beispiele für benutzerdefinierte dynamische Vue-Komponenten

Vue verfügt über viele Arten von UI-Komponentenbibliotheken, aber so viele Komponentenbibliotheken können unsere Entwicklungsanforderungen nicht erfüllen, sodass wir ein Plug-In entsprechend unseren eigenen Anforderungen schreiben müssen. Im Folgenden werde ich Ihnen zwei benutzerdefinierte Komponenten von js vorstellen Kastanien. Methode, interessierte Freunde sollten einen Blick darauf werfen

Es gibt viele UI-Komponentenbibliotheken, die auf Vue basieren, wie z. B. iview, element-ui usw. Aber manchmal können diese Komponentenbibliotheken unsere Entwicklungsanforderungen nicht erfüllen. Zu diesem Zeitpunkt müssen wir selbst ein Plug-In schreiben.

Das erste Beispiel

Nachdem Sie das Projektverzeichnis mit vue-cli erstellt haben, erstellen Sie einen neuen Ordner unter src/components, um uns dort abzulegen Das zu schreibende Plug-in ist wie im Bild gezeigt:

Schreiben Sie unsere Komponente in index.vue, der Code lautet wie folgt:

Schreiben Sie die Installationsmethode von index.vue in index.js und verwenden Sie Vue.component, um die Komponente zu registrieren:

Als nächstes müssen wir es zur Standarddatei main.js hinzufügen. Importieren Sie die gerade geschriebene index.js-Datei und verwenden Sie sie über Vue.use. Der Code lautet wie folgt:

Fertig. Sie können es direkt in app.vue verwenden. Nun können Sie sehen, dass die entsprechenden Komponenten auf der Seite angezeigt wurden, wie in der Abbildung gezeigt:

Zu diesem Zeitpunkt können wir das Klickereignis auch anpassen und über Parameter an unser Plug-in übergeben. Das Plug-in kann das Ereignis über das Props-Attribut abrufen, wie in der Abbildung gezeigt:

Sie können sehen, dass die Seite in Kraft getreten ist:

Vue.component(id, [definition]) wird zur Registrierung oder zum Bezug von Komponenten verwendet.

Vue.use(plugin) wird zum Installieren des Vue.js-Plug-Ins verwendet. Wenn das Plugin ein Objekt ist, muss die Installationsmethode bereitgestellt werden. Wenn das Plugin eine Funktion ist, wird es als Installationsmethode verwendet. Beim Aufruf der Installationsmethode wird Vue als Parameter übergeben. Wenn die Installationsmethode mehrmals von demselben Plug-In aufgerufen wird, wird das Plug-In nur einmal installiert.

Nimm die zweite Kastanie

Lass uns einen weiteren Ordner erstellen, wie im Bild gezeigt:

Wir werden eine Komponente schreiben, die den von außen eingegebenen Inhalt anzeigen und nach 3 Sekunden automatisch verschwinden kann. Der Code lautet wie folgt:

Weiter Wir müssen es zum Index hinzufügen. Verwenden Sie den Konstruktor in js, um es zu erstellen, wie in der Abbildung gezeigt:

Verweisen Sie gerade noch auf die js-Datei in der Standard-Hauptdatei. js und fügen Sie es der Vue-Instanz hinzu, damit wir es direkt über this.$seconddemo() aufrufen können. Der Code lautet wie folgt:

import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo

Verwenden it in app.vue und stellen Sie fest, dass das Plug-in erfolgreich geladen wurde. Wie im Bild gezeigt:

Vue.extend(options) ist der Konstruktor von Vue, der zum Erstellen eines verwendet wird "Unterklasse".

Einheitliche Verwaltung benutzerdefinierter Komponenten

Wenn eine große Anzahl von Komponenten vorhanden ist, können wir diese benutzerdefinierten Komponenten verwalten, indem wir eine einheitliche Exportdatei bereitstellen Erstellen Sie zunächst eine neue index.js-Datei im globalen Ordner. Der Code lautet wie folgt:

Die index.js-Datei hilft uns, alle benutzerdefinierten Komponenten über Vue zu übergeben. Komponente Registriert und exportiert schließlich ein Objekt, das die Installationsmethode enthält, nach Vue.use().

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Implementierung des Klickens auf verschiedene Links, um den zurückgegebenen Inhalt in einem bestimmten Div anzuzeigen

Jquery $ Die Ausführungssequenz eines Codeabschnitts außerhalb der .ajax-Funktion

Ajax-Bild-Upload selbst erstellen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für benutzerdefinierte dynamische Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!