Comparaison des schémas de livraison à plusieurs niveaux dans la communication des composants Vue

Comparaison des solutions de livraison multi-niveaux dans la communication des composants Vue

Vue est un framework frontal très populaire. Il fournit une méthode de développement basée sur les composants et réalise le développement d'applications complexes grâce à l'imbrication et à la communication de composants. Dans le développement réel, la communication entre les composants est souvent un problème important. Lorsqu'il existe des relations à plusieurs niveaux entre les composants, la manière de transférer efficacement les données devient une question à laquelle les développeurs doivent réfléchir. Cet article présentera plusieurs schémas de communication de composants multi-niveaux courants et les comparera.

1. Utilisez les accessoires et $emit

Vue fournit deux méthodes, props et $emit, pour implémenter le transfert de données entre les composants parent et enfant. Les accessoires sont utilisés par les composants parents pour transmettre des données aux composants enfants, et les composants enfants obtiennent des données via des accessoires. $emit est utilisé par les composants enfants pour transmettre des données aux composants parents. Le composant parent obtient des données en écoutant l'événement $emit sur les composants enfants.

L'exemple de code est le suivant :

Composant parent :

<template>
  <child-component :message="message" @update-message="updateMessage"></child-component>
</template>

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

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

Composant enfant :

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

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  methods: {
    sendMessage() {
      this.$emit('update-message', 'Hello, Vue!')
    }
  }
}
</script>

Cette solution convient à la communication entre les composants parent et enfant, mais lorsqu'il existe des relations à plusieurs niveaux entre les composants, elle doit être suite dans les composants intermédiaires En passant props et $emit, le code deviendra complexe et difficile à maintenir.

2. Utilisation d'Event Bus

Event Bus est un bus d'événements global qui implémente la communication entre les composants en créant une instance Vue globale. Le composant écoute les événements via $on et déclenche des événements via $emit.

L'exemple de code est le suivant :

EventBus.js :

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

Composant parent :

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

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    EventBus.$on('update-message', (newMessage) => {
      this.message = newMessage
    })
  }
}
</script>

Composant enfant :

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

<script>
import EventBus from './EventBus.js'

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

En utilisant Event Bus, la communication entre tous les composants peut être réalisée, mais comme il s'agit d'un bus d'événements global , des conflits de noms sont susceptibles de se produire et des circonstances chaotiques de l'événement. Et comme les composants communiquent directement via des événements, cela est peu intuitif et difficile à suivre.

3. Utilisation de Vuex

Vuex est la bibliothèque officielle de gestion d'état de Vue, utilisée pour implémenter l'état partagé entre les composants. Dans Vuex, les données sont stockées dans un magasin centralisé et les composants modifient les données en appelant des méthodes de magasin.

L'exemple de code est le suivant :

store.js :

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage
    }
  }
})

Composant parent :

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

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

export default {
  components: {
    ChildComponent
  },
  computed: {
    message() {
      return this.$store.state.message
    }
  }
}
</script>

Composant enfant :

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

<script>
import store from './store.js'

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

L'utilisation de Vuex peut très bien résoudre le problème de communication entre les composants, en particulier pour les composants à plusieurs niveaux. relations. Cependant, comme les données doivent être transférées via le magasin, celui-ci doit être introduit dans le composant et les données modifiées via la méthode de validation, ce qui augmente relativement la complexité du code.

Pour résumer, les solutions de livraison multi-niveaux dans la communication des composants Vue incluent props et $emit, Event Bus et Vuex. En fonction de la situation réelle, le choix d'une solution appropriée peut mieux améliorer l'efficacité du développement et la maintenabilité du code.

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!