Sprechen Sie über den Speicherort und die Nutzung globaler öffentlicher Uniapp-Komponenten

Bei der Verwendung von Uniapp für die Front-End-Entwicklung müssen wir häufig öffentliche Komponenten verwenden, z. B. benutzerdefinierte Navigationsleisten, untere Navigationsleisten, Popup-Fenster usw. Wo also sollten diese globalen öffentlichen Komponenten platziert werden? In diesem Artikel erfahren Sie mehr über den Speicherort und die Verwendung globaler öffentlicher Uniapp-Komponenten.

1. Der Speicherort globaler öffentlicher Uniapp-Komponenten

In Uniapp können wir den Zweck der Wiederverwendung derselben Komponente auf verschiedenen Seiten erreichen, indem wir öffentliche Komponenten erstellen. Diese Komponenten können in globale öffentliche Komponenten und lokale öffentliche Komponenten unterteilt werden.

Globale öffentliche Komponenten beziehen sich auf Komponenten, die im gesamten Projekt verwendet werden können, z. B. benutzerdefinierte Navigationsleisten, untere Navigationsleisten, Popup-Fenster usw. Lokale öffentliche Komponenten beziehen sich auf Komponenten, die nur innerhalb einer einzelnen Seite verwendet werden.

Wo sollen also die globalen öffentlichen Komponenten platziert werden? Öffentliche Komponenten in Uniapp können an den folgenden zwei Orten gespeichert werden:

1. /components/ Verzeichnis

im Stammverzeichnis des Uniapp-Projekts, Sie sehen einen Ordner mit dem Namen „components“, in dem globale öffentliche Komponenten abgelegt werden. Unter diesem Ordner können mehrere Unterordner erstellt werden. Jeder Unterordner speichert eine gemeinsame Komponente. Dieser Ansatz ermöglicht den Zugriff auf globale öffentliche Komponenten für das gesamte Projekt.

2. /pages/-Verzeichnis

Globale öffentliche Komponenten können auch im /pages/-Verzeichnis abgelegt werden. Diese Methode behandelt die Komponente als Seite und verwendet die Komponente, indem sie auf anderen Seiten auf die Seite verweist.

2. So verwenden Sie globale öffentliche Komponenten von uniapp

Nachdem wir den Standort globaler öffentlicher Komponenten gespeichert haben, können wir diese Komponenten auf jeder Seite verwenden.

Es gibt zwei Möglichkeiten, globale Komponenten zu verwenden:

1. Verwenden Sie die Vue.use()-Methode, um sich global zu registrieren

#🎜 🎜# Über die Methode Vue.use() können wir globale öffentliche Komponenten in jeder Vue-Komponente registrieren.

Zum Beispiel können wir uns in main.js so registrieren:

import BackTop from '@/components/BackTop.vue'
Vue.use(BackTop)

Dann können wir die Komponente wie folgt auf jeder Seite verwenden:

<template>
  <div>
    <back-top></back-top>
  </div>
</template>

#🎜 🎜 #Direkt auf der Seite zitieren

2. Wir können in den Komponenten der Seite auch direkt auf globale öffentliche Komponenten verweisen.

Wenn wir beispielsweise eine globale öffentliche Komponente namens MyDialog verwenden möchten, müssen wir den folgenden Import in der Seite durchführen:

import MyDialog from '@/components/MyDialog.vue'

Dann in der Komponente der Seite , Wir können globale öffentliche Komponenten wie normale Komponenten verwenden:

<template>
  <div>
    <my-dialog></my-dialog>
  </div>
</template>

Es ist zu beachten, dass wir bei Verwendung dieser Methode auf jeder Seite, die die Komponente verwenden muss, darauf verweisen müssen.

Zusammenfassung

In Uniapp gibt es zwei Speicherorte für globale öffentliche Komponenten: das /components/-Verzeichnis und das /pages/-Verzeichnis. Unter diesen ist das Verzeichnis /components/ ein gemeinsamer Speicherort, der den globalen Aufruf von Komponenten erleichtern kann. Im Verzeichnis /pages/ wird die Komponente als Seite betrachtet und die Komponente wird in anderen Seiten verwendet, indem auf die Seite verwiesen wird.

Unabhängig davon, welche Speichermethode verwendet wird, können wir globale öffentliche Komponenten über die Vue.use()-Methode oder durch direkte Referenzierung in der Komponente verwenden. Die Verwendung globaler öffentlicher Komponenten kann die Code-Wiederverwendungsrate erheblich verbessern und uns dabei helfen, Aufgaben während der Entwicklung effizienter und schneller zu erledigen.

Das obige ist der detaillierte Inhalt vonSprechen Sie über den Speicherort und die Nutzung globaler öffentlicher Uniapp-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!