Methoden zwischen Vue-Komponenten rufen sich gegenseitig auf

Bei der Vue-Komponentenentwicklung können Komponenten ineinander verschachtelt werden, und Komponenten mit unterschiedlichen Strukturen müssen häufig die Methoden der anderen aufrufen. Das heißt, Sie müssen eine Methode innerhalb einer Komponente implementieren, um eine Methode in einer anderen Komponente aufzurufen. Als Nächstes stellen wir vor, wie sich die Methoden zwischen Vue-Komponenten gegenseitig aufrufen.

1. Über übergeordnete Komponenten

In der komponentenbasierten Vue-Entwicklung verfügt jede Komponente über eine eigene übergeordnete Komponente, und die Komponenten können sich gegenseitig aufrufen. Wir können Methoden in der übergeordneten Komponente definieren und dann die Methode in der übergeordneten Komponente über $parent in der untergeordneten Komponente aufrufen.

Definieren Sie zunächst eine Methode in der übergeordneten Komponente:

methods:{
  changeMsg:function(){
     this.msg='hello world';
  }
}

Verwenden Sie dann this.$parent.changeMsg() in der untergeordneten Komponente, um die Methode in der übergeordneten Komponente aufzurufen.

2. Referenz durch Komponenten

In der komponentenbasierten Entwicklung von Vue können Unterkomponenten andere Komponenten durch Import einführen und die Methode zum Einführen von Komponenten in der Unterkomponente direkt aufrufen.

Angenommen, wir möchten die Methode von Komponente B in Komponente A aufrufen. Zuerst muss Komponente B in Komponente A eingeführt werden, wie unten gezeigt:

import B from '../B.vue'
export default {
  components: {
    B
  },...

}

Dann können wir in Komponente A direkt this.$refs verwenden, um die Komponente abzurufen B-Instanz und rufen Sie dann die Methode in Komponente B auf.

this.$refs.b.test();

3. Über Vuex

Vuex ist eine Zustandsverwaltungsbibliothek in Vue, die den globalen Zustand einfach verwalten kann. Wir können eine globale Methode in Vuex definieren und die globale Vuex-Methode über $store.dispatch in der Komponente aufrufen.

Zuerst müssen wir eine Methode in Vuex definieren:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    msg:'hello',
  },
  mutations: {
    changeMsg(state){
      state.msg='hello world';
    }
  },
  actions:{
    changeMsg({commit}){
      commit('changeMsg');
    }
  }
})

export default store;

Dann verwenden Sie den folgenden Code in der Komponente, um die Methode in Vuex aufzurufen:

this.$store.dispatch('changeMsg');

4. Über den Event-Bus

In Vue können wir das über den tun Ereignisbus Kommunikation zwischen Komponenten. Dieser Ansatz verteilt Ereignisse auf verschiedene Teile der Anwendung und ermöglicht uns die Weitergabe von Daten zwischen Komponenten.

Wir können eine leere Vue-Instanz als Ereignisbus erstellen und dann den Ereignisbus in der Komponente aufrufen, um das Ereignis auszulösen.

Erstellen Sie zunächst eine Vue-Instanz in main.js als Ereignisbus:

Vue.prototype.$bus = new Vue()

Dann können Sie in der Komponente den folgenden Code verwenden, um das Ereignis auszulösen:

 this.$bus.$emit('EVENT_NAME', data)

Schließlich können Sie in einer anderen Komponente den folgenden Code verwenden, um das zu empfangen Ereignis:

this.$bus.$on('EVENT_NAME', data => {
    // handle event
})

Durch die oben genannten vier Methoden können wir Methoden zwischen Vue-Komponenten implementieren, um sich gegenseitig aufzurufen. In tatsächlichen Anwendungen können wir die Methode auswählen, die unseren Anforderungen am besten entspricht, um Methodenaufrufe zwischen Komponenten zu implementieren.

Das obige ist der detaillierte Inhalt vonMethoden zwischen Vue-Komponenten rufen sich gegenseitig auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!