Explication détaillée de la technologie de communication des composants dans Vue

Vue est l'un des frameworks front-end les plus populaires aujourd'hui. Il nous fournit une méthode de développement basée sur des composants très puissante qui peut considérablement améliorer notre efficacité de développement. Dans le développement de Vue basé sur les composants, le traitement des communications entre les composants est très important. Cet article fournira une introduction détaillée à la technologie de communication des composants dans Vue.

1. Le composant parent transmet les données au composant enfant

Dans Vue, le composant parent transmet les données au composant enfant à l'aide de l'attribut props. Recevez les données transmises par le composant parent via l'attribut props dans le composant enfant.

Code du composant parent :

<template>
  <div>
    <child-component :msg="msg"></child-component>
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>

Code du composant enfant :

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    props: {
      msg: {
        type: String,
        required: true
      }
    }
  }
</script>

Ici, les données sont transmises en utilisant la balise du composant enfant dans le composant parent, et le composant enfant utilise l'attribut props pour recevoir les données transmises par le composant parent pour terminer le transfert de données.

2. Le sous-composant transmet les données au composant parent

Le sous-composant transmet les données au composant parent à l'aide d'événements personnalisés et de la méthode $emit.

Code du sous-composant :

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('send-message', 'Hello Parent!')
      }
    }
  }
</script>

Ici, en définissant une méthode, utilisez la méthode $emit pour transmettre des événements personnalisés et les données qui doivent être transmises.

Code du composant parent :

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
    <div>{{ message }}</div>
  </div>
</template>

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

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

Ici, utilisez la balise du composant enfant dans le composant parent pour écouter les événements personnalisés envoyés par le composant enfant et utilisez la méthode recevoirMessage pour recevoir le message transmis par le composant enfant.

3. Communication entre les composants frères et sœurs

Dans la communication entre les composants frères et sœurs, parce qu'ils n'ont pas de relation parent-enfant, ils ne peuvent pas utiliser directement les méthodes props et $emit pour communiquer comme la communication entre les composants parent-enfant que vous devez utiliser. Vue. Autre méthode de communication : le bus événementiel.

Un bus d'événements est une instance Vue personnalisée utilisée pour la communication entre les composants frères. Dans un composant, nous pouvons utiliser la méthode $emit pour envoyer des événements personnalisés au bus d'événements, et un autre composant peut écouter et recevoir des événements via la méthode $on.

Code du bus d'événement :

import Vue from 'vue'
export default new Vue();

Ici, un bus d'événement est créé via un fichier séparé.

Code du composant A :

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  import EventBus from '../utils/eventBus'

  export default {
    methods: {
      sendMessage() {
        EventBus.$emit('send-message', 'Hello B!')
      }
    }
  }
</script>

Ici, pour envoyer des messages dans le composant A, utilisez la méthode EventBus.$emit pour envoyer des événements personnalisés au bus d'événements.

Code du composant B :

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

<script>
  import EventBus from '../utils/eventBus'

  export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      EventBus.$on('send-message', msg => {
        this.message = msg
      })
    }
  }
</script>

Ici, écoutez le bus d'événements dans le composant B et utilisez la méthode EventBus.$on pour recevoir les messages envoyés par le composant A.

4. Communication de composants inter-niveaux

Dans la communication de composants inter-niveaux, nous pouvons utiliser la méthode provide/inject fournie dans Vue. Les méthodes provide/inject peuvent transmettre des données aux composants descendants à n’importe quel niveau. La méthode

provide fournira un objet de données au composant descendant, et la méthode inject injectera cet objet de données dans le composant descendant.

Code du composant parent :

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    provide() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

Ici, la méthode provide est utilisée dans le composant parent pour fournir un message d'objet de données en interne.

Code du composant enfant :

<template>
  <div>{{ value }}</div>
</template>

<script>
  export default {
    inject: ['message'],
    computed: {
      value() {
        return this.message
      }
    }
  }
</script>

Ici, utilisez la méthode inject dans le composant enfant pour injecter l'objet de données fourni par le composant parent, puis utilisez cet objet de données.

Résumé

Ce qui précède est une introduction détaillée à la communication des composants dans Vue. Lorsque nous devons interagir avec des données entre composants pendant le processus de développement, les technologies ci-dessus peuvent très bien résoudre ce problème. Nous devons choisir la manière la plus appropriée de mettre en œuvre la communication entre les composants en fonction de la situation spécifique afin d'obtenir un effet de développement optimal.

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!