So registrieren Sie die globale Komponente von Vue bei use

Dieses Mal zeige ich Ihnen, wie Sie globale Komponenten von Vue bei Verwendung registrieren und welche Vorsichtsmaßnahmen für die Registrierung globaler Vue-Komponenten bei Verwendung gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

Die Komponenten und Anweisungen in Vue sind in lokale Komponenten, lokale Anweisungen und globale Komponenten und globale Anweisungen unterteilt. Bei der Registrierung einer bestimmten Anzahl globaler Anweisungen und globaler Komponenten scheint die Methode im offiziellen Dokument etwas unklar zu sein.

Globale Komponente

In der offiziellen Vue-Dokumentation wird Vue.component(tagName, options) zum Erstellen einer globalen Komponente verwendet. Diese Methode wird jedoch in dieselbe Datei wie die Root-Instanz geschrieben. Wenn Sie mehrere globale Komponenten gleichzeitig registrieren möchten, wird die Root-Instanzdatei zu schwer. Verwenden Sie daher Vue.use(), um „“ zu verwenden Installieren“ Globale Komponenten erscheinen heller.

Methode:

1. Erstellen Sie einen neuen Plugins-Ordner

2. Erstellen Sie eine globale Komponente im Ordner „Dateikomponenten“. .js

3. Fügen Sie alle globalen Komponenten ein, die in der Datei „components.js“ registriert werden sollen.

4. Fügen Sie in der Datei „app.js“ die Komponenten .js ein

Nehmen Sie die Komponente eg als Beispiel:

components.js:

import eg from '../components/eg.vue';
export default (Vue)=>{
 Vue.component("Eg",eg);
}

app.js:

import components from './plugins/components.js';
Vue.use(components);

Nach dem obigen Schreiben wird die globale Komponente Eg registriert.

Wenn mehrere globale Komponenten registriert werden müssen, ist es erfrischender, diese Methode zu verwenden!

Globale Direktiven

Für die Registrierung globaler Direktiven ist die in der offiziellen Dokumentation angegebene Methode die Verwendung von Vue.directive(), der Speicherort befindet sich auch unter der Root-Instanzdatei, daher entsteht hier das Problem. Wenn mehrere globale Anweisungen in Verbindung mit mehreren globalen Komponenten vorhanden sind, wird die Datei app.js extrem aufgebläht.

Daher wird Vue.use() ähnlich wie die oben beschriebene Methode zur Registrierung globaler Komponenten auch zum „Installieren“ globaler Anweisungen verwendet.

Methode:

1. Erstellen Sie einen neuen Plugins-Ordner.

2. Erstellen Sie eine globale Komponente im Ordner Dateianweisungen .js

3. Führen Sie alle globalen Anweisungen ein, die in der Datei „directives.js“ registriert werden sollen

4. Führen Sie in der Datei „app.js root“ die Datei „directives.js“ ein Nehmen Sie als Beispiel die V-Focus-Direktive:

directives.js:

export default (Vue)=>{
 Vue.directive("focus",{
  inserted:function(el){
   el.focus();
  }
 })
}

app.js

Dadurch wird die globale Direktive registriert.

import directives from "./plugins/directives.js"
Vue.use(directives);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie vue2.0axios domänenübergreifend und rendern

So entfernen Sie alle doppelten Zeichen mit JS

Das obige ist der detaillierte Inhalt vonSo registrieren Sie die globale Komponente von Vue bei use. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!