Une brève analyse de la façon de transmettre des paramètres aux composants parents frères et sœurs dans Vue

Vue est un framework JavaScript populaire pour créer des interfaces utilisateur et des applications d'une seule page. Dans Vue, les composants sont les éléments de base d'une application et ils peuvent être réutilisés et combinés pour créer des applications plus volumineuses. Dans un composant Vue, vous devrez peut-être transmettre des paramètres à ses composants frères parents. Cet article présentera en détail comment implémenter cette fonction dans Vue.

Qu'est-ce que Vue ?

Vue est un framework léger, qui se caractérise par un code facile à utiliser et concis, des fonctions puissantes, adapté aux mobiles, etc. La documentation officielle de Vue fournit un ensemble complet de didacticiels et de documentation ainsi qu'une documentation API pour une utilisation facile par les développeurs. De plus, sa communauté est très active et il existe de nombreux frameworks avancés comme Nuxt.js qui apportent davantage d'aide aux développeurs.

Composants Vue

Les composants Vue sont les éléments de base des applications Vue. Les composants permettent aux développeurs de créer des composants d'interface utilisateur réutilisables et de combiner ces composants pour créer des applications plus volumineuses. Les composants Vue sont construits de bas en haut, avec des composants parents contenant des composants enfants, qui peuvent contenir davantage de composants enfants, ce qui aboutit finalement à une application complète.

Dans cette relation parent-enfant, le composant parent peut transmettre des données au composant enfant via l'attribut props. Props est une propriété utilisée pour transmettre des données au composant.

Composants parent-enfant

Dans Vue, la communication entre les composants parent-enfant est un scénario très courant. Dans l'arborescence des composants, les composants parents peuvent transmettre des données aux composants enfants via des accessoires, ce qui rend le flux de données entre les composants très simple. Le composant parent peut avoir des données ou des méthodes, et le composant enfant peut être programmé en fonction de ces données et méthodes. Habituellement, les composants enfants reçoivent les données transmises par les composants parents via les attributs props, puis utilisent ces données pour leur propre logique métier.

Le composant parent utilise l'attribut props pour transmettre des données au composant enfant, et le composant enfant utilise la méthode $emit pour envoyer des données au composant parent. Cependant, dans certains scénarios, il n'y a pas de relation parent-enfant directe, mais une relation frère (comme le montre la figure ci-dessous). Dans ce cas, le bus d'événements EventBus ou Vuex doit être utilisé pour transférer les données.

Composants frères et sœurs

Dans Vue, la communication entre les composants frères et sœurs nécessite l'utilisation d'un bus d'événements central, EventBus. Ce bus d'événements est une instance Vue qui peut être utilisée pour distribuer et écouter des événements. Dans une instance Vue, nous pouvons utiliser la méthode $on pour écouter les événements et la méthode $emit pour déclencher des événements. Pour les composants frères, nous devons importer le bus d'événements central dans la fenêtre en tant que variable globale, déclencher un événement via la méthode $emit dans le composant, puis écouter l'événement via la méthode $on dans un autre composant, et enfin être capable de recevoir correctement les données de livraison.

L'utilisation du bus d'événements pour établir une communication entre les composants frères peut rendre le code plus clair, et il n'est pas nécessaire d'utiliser Vuex pour gérer l'état, ce qui est une méthode d'implémentation relativement simple.

Implémentation du code

Ce qui suit est un exemple d'utilisation de la communication par bus d'événements central dans Vue Supposons qu'il y ait deux composants frères et que des données doivent être transférées entre eux :

<!-- 兄弟组件A -->
<template>
  <div>
    <button @click="sendMessage">发送数据</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        // 将数据作为参数传递给事件
        this.$bus.$emit('message', '这是一条来自兄弟组件A的消息')
      }
    }
  }
</script>

<!-- 兄弟组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: ''
      }
    },
    created() {
      // 监听事件，传递数据到message
      this.$bus.$on('message', (message) => {
        this.message = message
      })
    }
  }
</script>

<!-- 中央事件总线 -->
<script>
  import Vue from 'vue'
  export default new Vue()
</script>

Dans le code, nous utilisons l'instance Vue comme centrale. event Bus, envoyez des données au bus d'événements via la méthode sendMessage dans le composant frère A, puis écoutez l'événement via la méthode create dans le composant frère B et attribuez les données reçues à un message constant. Enfin, la valeur de cette constante est affichée dans le composant frère B pour réaliser le transfert de données entre les composants frères.

Résumé

Dans Vue, le transfert de données entre père et fils est très naturel et direct, mais le transfert de données entre frères nécessite l'utilisation d'un bus d'événements ou de Vuex. En bref, la communication entre les composants frères dans Vue n'est pas difficile. Nous pouvons utiliser le propre mécanisme de bus d'événements de Vue pour réaliser facilement le transfert de données. Cette approche est simple et facile à maintenir, et ne nécessite pas l'utilisation de bibliothèques ou de frameworks redondants.

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!