Mehrere Möglichkeiten zum Aufrufen von Methoden zwischen mehreren Dateien Vue

Bei der Vue-Entwicklung verwenden wir normalerweise Einzeldateikomponenten (.vue-Dateien) für die Entwicklung und teilen die Komponenten auf, um die Lesbarkeit und Wartbarkeit des Codes zu verbessern. Beim Aufrufen von Methoden zwischen mehreren Einzeldateikomponenten können jedoch einige Probleme auftreten. In diesem Artikel werden verschiedene Möglichkeiten zum Aufrufen von Methoden zwischen mehreren Dateien in Vue vorgestellt.

1. Verwenden Sie Mixin (Mixin)

Mixin ist eine sehr praktische Methode von Vue, mit der Sie öffentlichen Code kapseln und zwischen mehreren Komponenten teilen können. Wir können die Methoden schreiben, die in einem Mixin gemeinsam genutzt werden müssen, und dieses Mixin in die Komponenten einführen, die diese Methoden verwenden müssen.

Zum Beispiel haben wir eine Mixin-Datei mixin.js, die eine showMsg-Methode enthält:

export default {
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
}

Wir müssen mixin.js nur in der Komponente einführen, die die showMsg-Methode verwenden möchte.

import mixin from './mixin.js'

export default {
  mixins: [mixin],
  ...
}

Im obigen Code haben wir den Code von mixin.js mithilfe des mixins-Attributs eingeführt und ihn der Komponente hinzugefügt.

Auf diese Weise können Sie die showMsg-Methode in der Komponente verwenden.

this.showMsg()

2. Verwenden Sie dies.$refs

Wenn wir eine Komponente in Vue definieren, können wir ihr ein Ref-Attribut festlegen und auf diese Komponenteninstanz in der Komponente verweisen. Mit dieser Referenz können Methoden der aktuellen Komponente aufgerufen werden.

Zum Beispiel haben wir zwei Komponenten, Komponente A und Komponente B. Komponente A ruft die Methode in Komponente B auf. Dies kann durch die folgenden Schritte erreicht werden:

1. Setzen Sie das Ref-Attribut in Komponente B

<template>
  <div>
    组件B
  </div>
</template>

<script>
export default {
  methods: {
    methodOfB() {
      console.log('methodOfB')
    }
  }
}
</script>

<template>
  <div>
    <component-b ref="b"></component-b>
  </div>
</template>

<script>
import ComponentB from './ComponentB.vue'

export default {
  components: {ComponentB},
  methods: {
    methodOfA(){
      this.$refs.b.methodOfB()
    }
  }
}
</script>

Die Methode in Komponente A Verwenden Sie this.$refs.b, um die Instanz von Komponente B abzurufen und die Methode von Komponente B zu verwenden.

3. Verwenden Sie vuex

Vuex ist ein offiziell von Vue bereitgestelltes Statusverwaltungstool. Es ist sehr praktisch, Daten zwischen mehreren Komponenten auszutauschen. Darüber hinaus können wir in Vuex auch einige öffentliche Methoden zur Verwendung durch mehrere Komponenten definieren.

Zum Beispiel haben wir eine Datei „store.js“, in der eine öffentliche Methode definiert ist:

export default new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...},
  getters: {...},
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
})

In der Komponente, die diese öffentliche Methode verwenden muss, können wir die von Vuex bereitgestellte Methode „mapActions“ verwenden, um diese Methode der Komponente zuzuordnen .

import { mapState, mapMutations, mapActions } from 'vuex'

computed: {
  ...mapState(['...']),
},
mutations: {
  ...mapMutations(['...']),
},
actions: {
  ...mapActions(['showMsg']),
}

Auf diese Weise können Sie die showMsg-Methode in der Komponente verwenden.

4. EventBus verwenden

Wir können Vues eigenen EventBus verwenden, um zwischen Komponenten zu kommunizieren, die Methoden, die gemeinsam genutzt werden müssen, an EventBus zu binden, und andere Komponenten können diese Methoden verwenden.

Zum Beispiel erstellen wir einen EventBus in main.js:

import Vue from 'vue'

export const EventBus = new Vue()

In Komponenten, die gemeinsam genutzte Methoden verwenden müssen, können wir die EventBus.$on-Methode verwenden, um ein Ereignis abzuhören und die Nachricht über den Aufruf der gemeinsam genutzten Methode zu erhalten.

mounted(){
  EventBus.$on('showMsg', ()=>{this.showMsg()})
},

In Komponenten mit gemeinsam genutzten Methoden können wir die EventBus.$emit-Methode verwenden, um das showMsg-Ereignis auszulösen.

EventBus.$emit('showMsg')

Zusammenfassung

Die oben genannten Möglichkeiten sind mehrere Möglichkeiten, Methoden zwischen mehreren Dateien in Vue aufzurufen. Durch Mixin, this.$refs, Vuex und EventBus können wir die Notwendigkeit, Methoden in mehreren Komponenten gemeinsam zu nutzen, leicht erkennen. In der tatsächlichen Entwicklung können wir je nach tatsächlicher Situation eine Methode auswählen, die zu uns passt.

Das obige ist der detaillierte Inhalt vonMehrere Möglichkeiten zum Aufrufen von Methoden zwischen mehreren Dateien Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!