So registrieren Sie globale Vue-Komponenten und globale Anweisungen

Im Folgenden werde ich Ihnen eine Methode zur Registrierung globaler Vue-Komponenten und globaler Anweisungen vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

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 dadurch zu schwer. Daher ist es bequemer, Vue.use( zu verwenden. ), um globale Komponenten zu „installieren“.

Methode:

1. Erstellen Sie einen neuen Plugins-Ordner

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

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

4. Führen Sie in der Datei „app.js“ die Datei „components.js“ ein Nehmen Sie als Beispiel die Komponente eg:

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 oben Nach dem Schreiben wird die globale Komponente Eg registriert.

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

Globale DirektivenFür die Registrierung globaler Direktiven ist die in der offiziellen Dokumentation angegebene Methode die Verwendung von Vue.directive() und Der Speicherort befindet sich auch in der Root-Instanzdatei. Wenn mehrere globale Anweisungen und mehrere globale 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

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

oben Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird. Verwandte Artikel:

jQuery+Ajax liest JSON-Daten und sortiert nach Preisbeispiel

Vue-Datenkontrollansicht-Quellcode-Analyse

Beispielcode für die Entwicklung einer Schaltflächenkomponente mit Vue

Das obige ist der detaillierte Inhalt vonSo registrieren Sie globale Vue-Komponenten und globale Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!