Detaillierte Erklärung zur Verwendung von Vue.prototype in Vue

Wir verwenden möglicherweise Daten/Dienstprogramme in vielen Komponenten, möchten jedoch den globalen Umfang nicht beeinträchtigen. In diesem Fall können Sie sie in jeder Vue-Instanz verfügbar machen, indem Sie sie im Prototyp definieren.

1. Einfaches Beispiel

Fügen Sie Vue.prototype in main.js eine Variable hinzu

Vue.prototype.$appName = "Meine App"

Auf diese Weise ist $appName in allen Vue-Instanzen verfügbar, noch bevor die Instanz erstellt wird.

neuer Vue({
  vorErstellen: Funktion () {
    Konsole.log(dies.$AppName)
  }
})

Die Konsole druckt „Meine App“. So einfach ist das!

2. Legen Sie den Umfang für den Instanzprototyp fest

Warum beginnt appName mit ? Ist das wichtig? Hier gibt es keine Magie. Anfang? Ist das wichtig? Hier gibt es keine Magie. Anfang? Ist das wichtig? Hier gibt es keine Magie. Es ist eine einfache Konvention, dass Eigenschaften in allen Vue-Instanzen verfügbar sind. Auf diese Weise werden Konflikte mit bereits definierten Daten, Methoden und berechneten Eigenschaften vermieden.
Wenn wir setzen:

Vue.prototype.appName = "Meine App"

Was gibt also der folgende Code aus:

neuer Vue({
  Daten: {
    // Ups, „appName“ ist auch ein Instanzeigenschaftsname, den wir definiert haben!
    appName: „Der Name einer anderen App“
  },
  vorErstellen: Funktion () {
    console.log(dieser.AppName)
  },
  erstellt: Funktion () {
    console.log(dieser.AppName)
  }
})

Das Protokoll zeigt zuerst „Meine App“ und dann „Der Name einer anderen App“, da this.appName nach dem Erstellen der Instanz durch Daten überschrieben wird. Dies können wir verhindern, indem wir die Instanzeigenschaften auf einen bestimmten Bereich beschränken. Sie können bei Bedarf auch Ihre eigenen Konventionen verwenden, um dies zu vermeiden, beispielsweise durch die Festlegung von Instanzeigenschaften. Sie können bei Bedarf auch Ihre eigenen Konventionen verwenden, um dies zu vermeiden, beispielsweise durch die Festlegung von Instanzeigenschaften. Sie können auch Ihre eigenen Konventionen verwenden, wenn Sie möchten, z. B. _appName oder ΩappName, um Konflikte mit Plugins oder zukünftigen Plugins zu vermeiden.

3. Registrieren und Verwenden globaler Variablen

Jede Komponente ist eine Vue-Instanz. Vue.prototype fügt eine Variable hinzu, die jeder Komponente lediglich eine Eigenschaft hinzufügt. Der Wert dieser Eigenschaft ist nicht global.
Beispielsweise das folgende Beispiel:

// Haupt.js
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren

Vue.config.productionTip = falsch
Vue.prototype.$appName = "main"

neuer Vue({
    el: '#app',
    speichern,
    Router,
    Komponenten: { App },
    Vorlage: '<App/>',
})

// Registrieren Sie eine Eigenschaft $appName für alle Komponenten, weisen Sie einen Anfangswert von „main“ zu und alle Komponenten können mit this.$appName auf diese Variable zugreifen.
// Wenn in der Komponente kein Wert zugewiesen ist, ist der Anfangswert „main“

// Startseite.vue
<Vorlage>
  <div>
    <div @click="changeName">Name ändern</div>
    <div @click="gotoTest2">gehe zu test2</div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Methoden:{
    Name ändern(){
      dies.$appName = "test1"
    },
    gotoTest2(){
      dies.$router.push('/about')
    } 
  }
}
</Skript>

// über.vue
<Vorlage>
  <div>
    <div>{{this.$appName}} in test2</div>
  </div>
</Vorlage>

Klicken Sie auf „Name ändern“ auf der Startseite und dann auf „Info“. In „Info“ wird in test2 immer noch „main“ angezeigt.
Wenn Sie die Funktion einer globalen Variable implementieren möchten, müssen Sie das Attribut in einen Referenztyp ändern.

Vue.prototype.$appName = { Name: 'main' }

Verwenden Sie später this.$appName.name, um den entsprechenden Wert zu ändern und darauf zu verweisen. Nach der Eingabe von about wird test1 in test2 angezeigt

4. Kontext der Prototypmethoden

In JavaScript ruft eine Prototypmethode den Kontext der Instanz ab. Dies bedeutet, dass Sie damit auf Folgendes zugreifen können: Daten, berechnete Eigenschaften, Methoden oder alles andere, was in der Instanz definiert ist.
Verwenden wir dies mit einer Methode namens $reverseText:

 // Haupt.js
Vue.prototype.$reverseText = Funktion (Eigenschaftsname) {
  dies[Eigenschaftsname] = dies[Eigenschaftsname]
    .Teilt('')
    .umkehren()
    .verbinden('')
}

// Entsprechende Komponente <script>
Standard exportieren {
  Daten() {
    zurückkehren {
      Nachricht: 'Hallo'
    }
  },
  erstellt() {
    console.log(diese.Nachricht) // => "Hallo"
    dies.$reverseText('Nachricht')
    console.log(diese.Nachricht) // => "olleH"
  }
}
</Skript>

5. Anwendungsbeispiele

5.1 Einführung in Axios

npm installiere vue-axios --save

npm install qs.js --save // ​​Seine Funktion besteht darin, das JSON-Format direkt in das von den Daten benötigte Format zu konvertieren

// Haupt.js
Vue von „vue“ importieren
Axios von „Axios“ importieren
importiere qs von „qs“

Vue.prototype.$axios = axios //Globale Registrierung, Verwendung: this.$axios
Vue.prototype.qs = qs //Globale Registrierung, Verwendung: this.qs

// Entsprechende Komponente <script>
  Standard exportieren{
    Daten(){
      zurückkehren {
        Benutzer-ID: 666,　
                Token:'',
      }
    },
    erstellt(){
      dies.$axios({
        Methode: 'post',
        URL: „API“,
        data:this.qs.stringify({ //Hier sind die Daten, die an das Backend gesendet werden userId:this.userId,
          Token:dieses.Token,
        })
      }).then((response) =>{ //Hier wird die ES6-Syntax verwendet console.log(response) //Anforderung hat erfolgreich Daten zurückgegeben}).catch((error) =>{
        console.log(error) //Daten, die zurückgegeben wurden, als die Anforderung fehlschlug})
    }
  }
</Skript>

Der Unterschied zwischen Vue.prototype, Vue.component und Vue.use

1. Vue.prototype

Wenn Sie es an mehreren Stellen verwenden müssen, aber den globalen Bereich nicht beeinträchtigen möchten, definieren Sie es so und es wird in jeder Vue-Instanz verfügbar sein.
Referenz: https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
$ gibt an, dass dies eine Eigenschaft ist, die in allen Vue-Instanzen verfügbar ist und häufig für Methoden, Variablen usw. verwendet wird.

E-Charts aus „E-Charts“ importieren
Vue.prototype.$echarts = echarts 

2. vue.komponente

Komponenten global registrieren,
Der erste Parameter ist der Komponentenname, der beim Aufruf der Komponente geschrieben wird. Der zweite Parameter ist der Name, der beim Einführen der Komponente geschrieben wird. Er kann verwendet werden, um benutzerdefinierte Komponenten zu registrieren.

importiere myLoading aus „base/loading“
Vue.component('meinLaden',meinLaden);

3. Vue.use

Es handelt sich ebenfalls um eine globale Registrierung. Der Unterschied zur Komponente besteht darin, dass die empfangenen Parameter eine Installationsmethode haben müssen, die häufig zum Registrieren von Plug-Ins von Drittanbietern verwendet wird.

importiere ElementUI von „element-ui“;
Vue.use(ElementUI);

Damit ist dieser Artikel über die detaillierte Verwendung von Vue.prototype in Vue abgeschlossen. Weitere relevante Inhalte zur Verwendung von Vue.prototype finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!