Plusieurs façons d'appeler des méthodes entre plusieurs fichiers Vue

Dans le développement de Vue, nous utilisons généralement des composants à fichier unique (fichiers .vue) pour le développement, en divisant les composants pour améliorer la lisibilité et la maintenabilité du code. Mais lors de l’appel de méthodes entre plusieurs composants d’un seul fichier, certains problèmes peuvent survenir. Cet article présentera plusieurs façons d'appeler des méthodes entre plusieurs fichiers dans Vue.

1. Utilisez Mixin (Mixin)

Mixin est une méthode très pratique fournie par Vue, qui peut encapsuler du code public et le partager entre plusieurs composants. Nous pouvons écrire les méthodes qui doivent être partagées dans un Mixin et introduire ce Mixin dans les composants qui doivent utiliser ces méthodes.

Par exemple, nous avons un fichier Mixin mixin.js, qui contient une méthode showMsg :

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

Il suffit d'introduire mixin.js dans le composant qui souhaite utiliser la méthode showMsg.

import mixin from './mixin.js'

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

Dans le code ci-dessus, nous avons introduit le code de mixin.js en utilisant l'attribut mixins et l'avons ajouté au composant.

De cette façon, vous pouvez utiliser la méthode showMsg dans le composant.

this.showMsg()

2. Utilisez this.$refs

Lorsque nous définissons un composant dans Vue, nous pouvons lui définir un attribut ref et référencer cette instance de composant dans le composant. Cette référence peut être utilisée pour appeler les méthodes du composant actuel.

Par exemple, nous avons deux composants, le composant A et le composant B. Le composant A appelle la méthode dans le composant B. Cela peut être réalisé en suivant les étapes suivantes :

1. Définissez l'attribut ref dans le composant 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>

La méthode dans le composant A Utilisez this.$refs.b pour obtenir l'instance du composant B et utilisez la méthode du composant B.

3. Utilisez vuex

Vuex est un outil de gestion d'état officiellement fourni par Vue. Il est très pratique de partager des données entre plusieurs composants. De plus, nous pouvons également définir certaines méthodes publiques dans Vuex à utiliser par plusieurs composants.

Par exemple, nous avons un fichier store.js dans lequel une méthode publique est définie :

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

Dans le composant qui doit utiliser cette méthode publique, nous pouvons utiliser la méthode mapActions fournie par Vuex pour mapper cette méthode au composant .

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

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

De cette façon, vous pouvez utiliser la méthode showMsg dans le composant.

4. Utilisation d'EventBus

Nous pouvons utiliser le propre EventBus de Vue pour communiquer entre les composants, lier les méthodes qui doivent être partagées à EventBus, et d'autres composants peuvent utiliser ces méthodes.

Par exemple, nous créons un EventBus dans main.js :

import Vue from 'vue'

export const EventBus = new Vue()

Dans les composants qui doivent utiliser des méthodes partagées, nous pouvons utiliser la méthode EventBus.$on pour écouter un événement afin d'obtenir le message d'appel de la méthode partagée.

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

Dans les composants avec des méthodes partagées, nous pouvons utiliser la méthode EventBus.$emit pour déclencher l'événement showMsg.

EventBus.$emit('showMsg')

Résumé

Ci-dessus, il existe plusieurs façons d'appeler des méthodes entre plusieurs fichiers dans Vue. Grâce à Mixin, this.$refs, Vuex et EventBus, nous pouvons facilement réaliser la nécessité de partager des méthodes dans plusieurs composants. Dans le développement réel, nous pouvons choisir une méthode qui nous convient en fonction de la situation réelle.

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!