So verwenden Sie Exportverlagerung und Import in Vue

Der Exportieren von Exportieren wird verwendet, um Vue -Komponenten zu exportieren und andere Module zugreifen zu lassen. Der Import wird verwendet, um Komponenten aus anderen Modulen zu importieren, die eine einzelne oder mehrere Komponenten importieren können.

export default und import in VUE: Eine zarte Komponentenkombination

Viele Anfänger sind durch export default und import in VUE -Komponenten verwirrt und denken, dass sie wie ein Paar nicht zu unterscheidender Zwillinge sind und immer nicht herausfinden können, wer wer ist. Tatsächlich liegt der Schlüssel zum Verständnis darin, die Idee der Modularität von VUE -Komponenten zu verstehen. Lassen Sie uns diesen Artikel eingehend diskutieren, damit Sie sie vollständig erfassen können.

Lassen Sie uns zuerst über die Schlussfolgerung sprechen: export default , um eine VUE -Komponente zu exportieren, während import verwendet wird, um diese Komponente zu importieren und an anderer Stelle zu verwenden. Einfach? Aber hier gibt es viele Möglichkeiten.

Grundlagen: Modularität und Komponenten

In Vue befürworten wir die Komponentenentwicklung und teilen komplexe Seiten in kleine, wiederverwendbare Komponenten auf. export default und import sind der Schlüssel zur Erreichung der Komponentenmodularisierung. Stellen Sie sich vor, wenn der gesamte Code ohne sie in einer Datei gestapelt ist, wäre es eine Katastrophe, die Sie aufrechterhalten würden!

export default : Der Export der Komponente

Der Zweck der export default besteht darin, eine VUE -Komponente so zu exportieren, damit andere Module darauf zugreifen können. Es ermöglicht nur das Exportieren einer Standardkomponente. Siehe ein Beispiel:

 <code class="javascript">// MyComponent.vue export default { name: 'MyComponent', data() { return { message: 'Hello from MyComponent!' }; }, template: ` <div> <p>{{ message }}</p> </div> ` };</code>

Dieser Code definiert eine Komponente namens MyComponent und exportiert sie mithilfe von export default . Beachten Sie, dass es hier nur einen Export gibt, der die export default -Standardfunktion ist.

import : Der Eintrag der Komponente

Der Zweck der import besteht darin, Komponenten aus anderen Modulen zu importieren. Es kann eine einzelne Komponente oder mehrere Komponenten importieren. Mal sehen, wie MyComponent importiert wird:

 <code class="javascript">// App.vue import MyComponent from './MyComponent.vue'; export default { name: 'App', components: { MyComponent }, template: ` <div id="app"> <mycomponent></mycomponent> </div> ` };</code>

Hier import MyComponent from './MyComponent.vue' , um MyComponent -Komponente aus der Datei MyComponent.vue zu importieren. Registrieren Sie dann die Komponente in der Option components und rendern Sie sie schließlich mit <mycomponent></mycomponent> in der Vorlage. Ist es nicht sehr einfach?

Fortgeschrittene Nutzung und potenzielle Probleme

Sie fragen sich vielleicht, was ist, wenn ich mehrere Komponenten zum Export habe? Zu diesem Zeitpunkt können Sie die export anstelle von export default verwenden. Mit export können Sie mehrere benannte Komponenten exportieren, benötigt jedoch den entsprechenden Namen beim Import. Dies wird in großen Projekten flexibler sein, fügt aber auch die Komplexität des Managements hinzu.

Ein häufiger Fehler besteht darin, zu vergessen, importierte Komponenten in der components zu registrieren. Wenn Sie vergessen, sich zu registrieren, erkennt Vue die Komponente nicht, was zu einem Versagen führt. Überprüfen Sie beim Debuggen Ihre components , um sicherzustellen, dass alle importierten Komponenten korrekt registriert sind.

Darüber hinaus ist die Richtigkeit des Pfades von entscheidender Bedeutung. Stellen Sie sicher, dass der Pfad in Ihrer import -Anweisung korrekt ist, andernfalls wird ein Fehler, den das Modul nicht finden kann, auftritt. Sowohl relative als auch absolute Pfade sind in Ordnung, aber die Konsistenz halten.

Leistungsoptimierung

In großen Projekten kann eine große Anzahl von Komponentenimporten die Leistung beeinflussen. Sie können in Betracht ziehen, die Techniken zur Segmentierung von On-Demand-Lade- oder Code-Segmentierung zu verwenden, um die Ladegeschwindigkeiten zu optimieren. Diese Techniken liegen außerhalb des Rahmens dieses Artikels, aber sie lohnt sich, nach dem studierten Vue ausführlich zu erforschen.

Kurz gesagt, export default und import sind die Eckpfeiler der Modularität der VUE-Komponenten, und das Verständnis ist der Schlüssel zum Schreiben hochwertiger VUE-Anwendungen. Denken Sie daran, sie arbeiten zusammen, export default ist für den Export verantwortlich, import ist für den Import verantwortlich, beide sind unverzichtbar. Üben Sie mehr und üben Sie mehr und Sie können sie leicht kontrollieren!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Exportverlagerung und Import in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!