Comment passer des appels entre les composants vue

Vue est un framework JavaScript très populaire dans le développement Web moderne, dont les composants constituent une partie très importante. Dans Vue, les composants peuvent être réutilisés, et la communication entre les composants est également un problème souvent rencontré en développement. Cet article présentera les problèmes de communication entre les composants Vue et explorera en détail comment « passer des appels » entre les composants Vue.

1. Communication entre les composants Vue

Dans Vue, la communication entre les composants est principalement divisée en deux manières : la communication entre les composants parent-enfant et la communication entre les composants non parent-enfant.

1. Communication entre les composants parent-enfant

Dans les composants Vue, les composants parents peuvent transmettre des données aux composants enfants via des accessoires.

Modèle de composant parent :

<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

Script du composant enfant :

<script>
  export default {
    props: ['message']
  }
</script>

La façon dont le composant parent transmet les données au composant enfant est très simple. Il vous suffit d'ajouter l'attribut props à l'étiquette du composant enfant et d'augmenter les données de transfert requises. par le composant enfant.

Après avoir reçu les données transmises par le composant parent, le composant enfant peut utiliser ces données dans le modèle :

<template>
  <div>
    {{message}}
  </div>
</template>

La transmission de données au composant enfant via des accessoires est l'une des méthodes de communication parent-enfant les plus couramment utilisées dans Vue. En pratique, nous pouvons également avoir besoin d'exécuter les méthodes du composant parent ou de manipuler les données du composant parent. Dans ce cas, l'événement émis peut être utilisé pour communiquer entre le composant parent et le composant enfant.

Composant parent :

<template>
  <div>
    <child @sendMsg="updateMessage"></child>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        message: ''
      }
    },
    methods: {
      updateMessage (msg) {
        this.message = msg
      }
    }
  }
</script>

Utilisez la méthode $emit pour déclencher l'événement sendMsg dans le composant enfant

<script>
  export default {
    methods: {
      sendMessage () {
        this.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

2 Communication entre composants non parent-enfant

Dans Vue, si le composant n'est pas une relation parent-enfant, alors. la communication entre les composants peut utiliser le bus d'événements du fournisseur officiel Vue.

Méthode d'implémentation spécifique :

Créer un nouveau fichier eventBus.js

import Vue from 'vue'

export const eventBus = new Vue()

Dans le composant qui doit communiquer, importer eventBus.js et utiliser $emit pour déclencher l'événement :

<script>
  import { eventBus } from './eventBus.js'

  export default {
    methods: {
      sendMessage () {
        eventBus.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

Recevoir l'événement :

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  import { eventBus } from './eventBus.js'

  export default {
    data () {
      return {
        message: ''
      }
    },
    created () {
      eventBus.$on('sendMsg', (msg) => {
        this.message = msg
      })
    }
  }
</script>

This Cette méthode peut rendre la communication entre les composants différente, mais elle présente certains inconvénients : lorsque l'application est très complexe, il est difficile de retracer les liens de communication entre les composants.

2. Méthodes de communication et sélections entre les composants

Pendant le processus de développement d'une application, il est nécessaire de choisir une méthode de communication adaptée à l'application afin d'améliorer l'efficacité et les performances du développement.

1. La communication des composants parent-enfant

convient aux situations où les composants parent-enfant doivent transférer des données ou effectuer des opérations. Cette méthode est relativement simple et facile à maintenir et à déboguer.

2. Communication entre composants non parent-enfant

Applicable aux situations où une communication est requise entre les niveaux croisés, les frères et d'autres composants non parent-enfant. L'utilisation de la méthode du bus d'événements peut simplement implémenter la communication entre les composants, mais elle peut facilement entraîner des difficultés de débogage et une complexité accrue.

3.Vuex

Vuex est la bibliothèque de gestion d'état officiellement fournie par Vue, qui est utilisée pour gérer l'état (y compris les données et les opérations) dans l'application. Convient aux projets plus importants lorsque de grandes quantités de données doivent être partagées.

En utilisant Vuex, vous pouvez placer la communication entre les composants dans le magasin Vuex, puis laisser les composants requis obtenir les données dans le magasin via des getters ou utiliser des actions pour déclencher des changements d'état dans le magasin, mettre à jour les données dans le magasin et puis informez les autres composants.

Résumé :

Dans le développement de Vue, la communication entre les composants est un problème courant. Nous pouvons choisir la communication entre composants parent-enfant, la communication entre composants non parent-enfant et Vuex pour la gestion de l'état en fonction de la situation réelle. Une utilisation appropriée de ces méthodes peut améliorer l’efficacité et les performances du développement d’applications.

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!