Les méthodes entre les composants de vue s'appellent

Dans le développement basé sur les composants Vue, les composants peuvent être imbriqués les uns dans les autres, et les composants avec des structures différentes doivent souvent s'appeler les méthodes les uns des autres. C'est-à-dire que vous devez implémenter une méthode dans un composant pour appeler une méthode dans un autre composant. Ensuite, présentons comment les méthodes entre les composants Vue s'appellent.

1. Grâce aux composants parents

Dans le développement basé sur les composants Vue, chaque composant a son propre composant parent et les composants peuvent s'appeler. Nous pouvons définir des méthodes dans le composant parent, puis appeler la méthode dans le composant parent via $parent dans le composant enfant.

Définissez d'abord une méthode dans le composant parent :

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

Ensuite, utilisez this.$parent.changeMsg() dans le composant enfant pour appeler la méthode dans le composant parent.

2. Référence via des composants

Dans le développement basé sur les composants de Vue, les sous-composants peuvent introduire d'autres composants via l'importation et appeler directement la méthode d'introduction des composants dans le sous-composant.

En supposant que l'on veuille appeler la méthode du composant B dans le composant A, il faut d'abord introduire le composant B dans le composant A, comme indiqué ci-dessous :

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

}

Puis dans le composant A Vous pouvez utiliser directement this.$refs pour obtenir l'instance du composant B, puis appeler la méthode dans le composant B.

this.$refs.b.test();

3. Grâce à Vuex

Vuex est une bibliothèque de gestion d'état dans Vue qui peut facilement gérer l'état global. Nous pouvons définir une méthode globale dans Vuex et appeler la méthode globale Vuex via $store.dispatch dans le composant.

Nous devons d'abord définir une méthode dans Vuex :

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;

Ensuite, utilisez le code suivant dans le composant pour appeler la méthode dans Vuex :

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

#🎜🎜 # 4. Grâce au bus d'événements

Dans Vue, nous pouvons établir une communication entre les composants via le bus d'événements. Cette approche distribue les événements à différentes parties de l'application et nous permet de transmettre des données entre les composants.

Nous pouvons créer une instance Vue vide en tant que bus d'événements, puis appeler le bus d'événements dans le composant pour déclencher des événements.

Créez d'abord une instance Vue dans main.js comme bus d'événements :

Vue.prototype.$bus = new Vue()

Ensuite, vous pouvez utiliser le code suivant dans le composant pour déclencher des événements :

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

#🎜 🎜#Enfin, vous pouvez utiliser le code suivant dans un autre composant pour recevoir des événements :

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

Grâce aux quatre méthodes ci-dessus, nous pouvons implémenter des méthodes entre les composants Vue pour s'appeler. Dans les applications réelles, nous pouvons choisir la méthode qui correspond le mieux à nos besoins pour implémenter les appels de méthode entre les composants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!