Maison interface Web Voir.js Méthodes de communication des composants Vue et leurs pratiques

Méthodes de communication des composants Vue et leurs pratiques

Oct 15, 2023 pm 01:25 PM
props 事件总线 vue 组件通信

Méthodes de communication des composants Vue et leurs pratiques

Méthodes de communication des composants Vue et leurs pratiques

Dans le développement de Vue, la communication entre composants est un concept très important. Il nous permet de diviser une application complexe en plusieurs composants indépendants, rendant l'interaction entre les composants plus flexible et efficace. Vue fournit une variété de méthodes de communication pour les composants. Nous pouvons choisir la méthode appropriée pour le transfert de données et l'interaction entre les composants en fonction des besoins réels. Cet article présentera plusieurs méthodes courantes de communication des composants Vue et donnera des exemples de code correspondants.

1. Accessoires et événements
Les accessoires et événements sont les méthodes de communication de composants les plus basiques et les plus couramment utilisées dans Vue. Grâce aux accessoires, les composants parents peuvent transmettre des données aux composants enfants ; via les événements, les composants enfants peuvent envoyer des messages aux composants parents.

  1. Props transmet les données
    Le composant parent transmet les données au composant enfant via l'attribut props, et le composant enfant reçoit les données via l'option props.

Exemple de code :

// 父组件
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component!'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>
Copier après la connexion

Dans cet exemple, le composant parent transmet parentMessage au composant enfant via :message="parentMessage", et le composant enfant est défini via props Le type de données reçu par le composant. :message="parentMessage"parentMessage传递给子组件,并通过props定义了子组件接收的数据类型。

  1. Events发送消息
    子组件通过$emit方法向父组件发送消息。父组件通过在子组件标签上添加事件监听来接收消息。

代码示例:

// 父组件
<template>
  <div>
    <child-component @message="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

// 子组件
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child component!')
    }
  }
}
</script>
Copier après la connexion

在这个例子中,子组件通过this.$emit('message', 'Hello from child component!')发送消息,父组件通过@message监听子组件的消息,并在handleMessage方法中处理。

二、Vuex
Vuex是Vue的官方状态管理库,它提供了一种集中化管理应用状态的方式,用于解决组件间共享数据的问题。

以下是使用Vuex进行组件通信的基本步骤:

  1. 创建一个Vuex的store对象。
  2. 在store对象中定义state,即应用的状态。
  3. 使用getters定义一些派生状态,用于获取和计算state的值。
  4. 使用mutations定义一些同步操作,用于修改state的值。
  5. 使用actions定义一些异步操作,用于处理一些复杂的业务逻辑。
  6. 在组件中使用this.$store.state获取state的值。

代码示例:
以下是一个简单的Vuex应用的示例。假设我们的应用有一个计数器,通过点击按钮增加计数器的值,并在组件中显示。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementCount({ commit }) {
      commit('increment')
    }
  }
})
Copier après la connexion
// Counter.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    incrementCount() {
      this.$store.dispatch('incrementCount')
    }
  }
}
</script>
Copier après la connexion

在这个例子中,我们定义了一个名为count的state和一个名为increment的mutation。在组件中,我们使用this.$store.state.count获取count的值,并在点击按钮时通过this.$store.dispatch('incrementCount')调用incrementCount action。

三、Event Bus
Event Bus是一种简单但强大的组件通信方式,它利用Vue的实例作为中央事件总线。我们可以在任意组件上监听自定义事件,并在其他组件上触发相应事件。

以下是使用Event Bus进行组件通信的基本步骤:

  1. 创建Event Bus实例:const bus = new Vue()
  2. 在监听事件的组件中使用bus.$on方法监听自定义事件。
  3. 在触发事件的组件中使用bus.$emit方法触发自定义事件。

代码示例:

// Counter.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    incrementCount() {
      this.count++
      this.$bus.$emit('count-updated', this.count)
    }
  },
  created() {
    this.$bus.$on('count-updated', (count) => {
      this.count = count
    })
  }
}
</script>

// main.js
import Vue from 'vue'

Vue.prototype.$bus = new Vue()

new Vue({
  render: h => h(App),
}).$mount('#app')
Copier après la connexion

在这个例子中,我们在Counter组件中创建了一个名为count的数据,并通过点击按钮递增count的值。在递增count的同时,我们使用this.$bus.$emit('count-updated', this.count)触发count-updated事件。在Counter组件的created钩子函数中,我们使用this.$bus.$on

    Les événements envoient des messages

    Le composant enfant envoie des messages au composant parent via la méthode $emit. Le composant parent reçoit des messages en ajoutant des écouteurs d'événements sur les balises du composant enfant.

    🎜Exemple de code : 🎜rrreee🎜Dans cet exemple, le composant enfant envoie un message via this.$emit('message', 'Bonjour du composant enfant !') et le composant parent via @message écoute les messages des sous-composants et les gère dans la méthode handleMessage. 🎜🎜2. Vuex🎜Vuex est la bibliothèque officielle de gestion d'état de Vue. Elle fournit un moyen centralisé de gérer l'état des applications pour résoudre le problème du partage de données entre les composants. 🎜🎜Voici les étapes de base pour la communication des composants à l'aide de Vuex : 🎜🎜🎜Créez un objet de magasin Vuex. 🎜🎜Définissez l'état dans l'objet store, qui est l'état de l'application. 🎜🎜Utilisez des getters pour définir certains états dérivés afin d'obtenir et de calculer les valeurs d'état. 🎜🎜Utilisez des mutations pour définir certaines opérations de synchronisation afin de modifier la valeur de l'état. 🎜🎜Utilisez des actions pour définir certaines opérations asynchrones afin de gérer une logique métier complexe. 🎜🎜Utilisez this.$store.state dans le composant pour obtenir la valeur de l'état. 🎜🎜🎜Exemple de code : 🎜Ce qui suit est un exemple d'application Vuex simple. Supposons que notre application dispose d'un compteur et que la valeur du compteur soit incrémentée en cliquant sur un bouton et affichée dans le composant. 🎜rrreeerrreee🎜Dans cet exemple, nous définissons un état nommé count et une mutation nommée incrément. Dans le composant, nous utilisons this.$store.state.count pour obtenir la valeur de count, et lorsque vous cliquez sur le bouton, transmettez this.$store.dispatch('incrementCount') Appelez l'action IncreaseCount. 🎜🎜3. Event Bus🎜Event Bus est une méthode de communication de composants simple mais puissante qui utilise les instances Vue comme bus d'événements central. Nous pouvons écouter des événements personnalisés sur n'importe quel composant et déclencher des événements correspondants sur d'autres composants. 🎜🎜Voici les étapes de base pour la communication des composants à l'aide d'Event Bus : 🎜🎜🎜Créez une instance Event Bus : const bus = new Vue()🎜🎜Utilisez bus dans le composant qui écoute à l'événement La méthode $on écoute les événements personnalisés. 🎜🎜Utilisez la méthode bus.$emit dans le composant qui déclenche l'événement pour déclencher un événement personnalisé. 🎜🎜🎜Exemple de code : 🎜rrreee🎜Dans cet exemple, nous créons une donnée appelée count dans le composant Counter et incrémentons la valeur de count en cliquant sur le bouton. Lors de l'incrémentation du nombre, nous utilisons this.$bus.$emit('count-updated', this.count) pour déclencher l'événement count-updated. Dans la fonction hook créée du composant Counter, nous utilisons la méthode this.$bus.$on pour écouter l'événement count-updated et mettre à jour la valeur de count dans la fonction de rappel. 🎜🎜Résumé : 🎜Cet article présente plusieurs méthodes de communication de composants couramment utilisées dans Vue et donne des exemples de code correspondants. Les accessoires et les événements sont les méthodes de communication de composants les plus basiques et les plus couramment utilisées, adaptées au transfert de données et à l'envoi de messages entre les composants parents et enfants. Vuex est une bibliothèque de gestion d'état utilisée pour gérer l'état des applications. Elle convient aux situations où l'état est partagé entre plusieurs composants. Event Bus est une méthode de communication de composants simple mais puissante qui peut réaliser la transmission de messages entre n'importe quel composant. En fonction des besoins réels, nous pouvons choisir la méthode de communication des composants appropriée pour répondre aux besoins d'interaction entre les différents composants. Dans le même temps, des scénarios plus complexes peuvent nécessiter l’utilisation d’autres méthodes de communication avancées entre composants, telles que fournir/injecter, etc. Dans le processus de développement actuel, nous pouvons utiliser ces méthodes de communication de composants de manière flexible en fonction de besoins spécifiques afin d'obtenir une interaction de composants plus efficace et plus flexible. 🎜

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser les accessoires et émettre dans Vue3 Comment utiliser les accessoires et émettre dans Vue3 May 26, 2023 pm 06:13 PM

Fonction : le composant parent transmet les données au composant enfant via des accessoires ; Objectif : lorsqu'un type de composant doit être utilisé plusieurs fois, chaque appel n'est différent qu'à des endroits spécifiques, tout comme un formulaire de profil personnel, qui doit être rempli. à chaque fois. Les informations sont différentes pour chaque personne, mais la structure est la même. Utilisation 1 (acceptation simple sans préciser le type) : Introduisez le sous-composant dans le composant parent, passez les paramètres via l'attribut label du sous-composant et définissez une option props dans le sous-composant pour la réception et l'utilisation. ajoutez des accessoires dans le sous-composant. D'autres endroits sont définis à l'avance ci-dessus. Vous pouvez voir que l'âge transmis est un type de chaîne. Si vous souhaitez que la valeur transmise soit automatiquement augmentée de 1, vous ne pouvez pas ajouter 1 lors de l'utilisation du sous-composant. Comme le montre la figure ci-dessous, cela deviendra une chaîne.

Comment utiliser les accessoires et les émissions dans vue3 et spécifier leur type et leur valeur par défaut Comment utiliser les accessoires et les émissions dans vue3 et spécifier leur type et leur valeur par défaut May 19, 2023 pm 05:21 PM

L'utilisation de DéfinirProps DéfinirProps n'a pas besoin d'être introduite lors de son utilisation, et il s'agit d'une méthode globale par défaut. Utilisez constprops=defineProps({attr1:{type:String,//S must be majuscule default:"",},attr2:Boolean,attr3:{type:Number,required:true,},} dans le projet vue3 développé par js ); L'utilisation dans l'environnement js est similaire à celle de vue2, sauf que l'API facultative est remplacée par une API combinée. Le type d'accessoires défini et la valeur par défaut sont tous deux identiques au type vue2, qui est utilisé dans vue3

Comment résoudre l'erreur Vue : impossible d'utiliser des accessoires pour transmettre des données Comment résoudre l'erreur Vue : impossible d'utiliser des accessoires pour transmettre des données Aug 17, 2023 am 10:06 AM

Comment résoudre l'erreur Vue : Impossible d'utiliser des accessoires pour transmettre des données Préface : Pendant le processus de développement de Vue, il est très courant d'utiliser des accessoires pour transférer des données entre les composants parents et enfants. Cependant, nous pouvons parfois rencontrer un problème, c'est-à-dire qu'une erreur se produit lors de l'utilisation d'accessoires pour transmettre des données. Cet article se concentrera sur la façon de résoudre l'erreur selon laquelle les accessoires ne peuvent pas être utilisés pour transmettre des données dans Vue. Description du problème : dans le développement de Vue, lorsque nous utilisons des accessoires dans le composant parent pour transmettre des données au composant enfant, si

Comment implémenter la communication entre les composants via le bus d'événements dans Vue Comment implémenter la communication entre les composants via le bus d'événements dans Vue Oct 15, 2023 am 08:30 AM

La façon d'implémenter la communication entre les composants via le bus d'événements dans Vue nécessite des exemples de code spécifiques. Le bus d'événements est un mécanisme de communication de composants courant dans Vue. Il permet une communication concise et flexible entre différents composants sans introduire explicitement de relations parent-enfant ni utiliser d'état. bibliothèques de gestion telles que Vuex. Cet article présentera comment implémenter la communication entre les composants via le bus d'événements dans Vue et fournira des exemples de code spécifiques. Qu'est-ce qu'un bus événementiel ? Un bus d'événements est un mécanisme permettant de transmettre des messages entre composants. Dans Vue, on peut utiliser V

Qu'est-ce que le bus d'événements dans Vue et comment l'utiliser ? Qu'est-ce que le bus d'événements dans Vue et comment l'utiliser ? Jun 11, 2023 pm 07:39 PM

Vue est un framework JavaScript très populaire qui nous aide à créer des interfaces interactives complexes avec des idées de liaison de données et de composants réactifs. Dans Vue, nous avons souvent besoin de transférer des données et de déclencher des événements entre composants, et le bus d'événements est une solution très utile. 1. Qu'est-ce qu'un bus événementiel ? Le bus d'événements est un gestionnaire d'événements central qui permet la communication entre différents composants, permettant ainsi la diffusion d'événements et le partage de données entre les composants. Dans Vue, on peut passer

Tutoriel de base VUE3 : accessoires et calcul à l'aide du framework réactif Vue.js Tutoriel de base VUE3 : accessoires et calcul à l'aide du framework réactif Vue.js Jun 15, 2023 pm 08:44 PM

Vue.js est un framework JavaScript populaire pour créer des applications Web avec des systèmes réactifs. Vue.js fournit un ensemble de directives et de composants faciles à utiliser pour simplifier le processus de développement. Dans cet article, nous apprendrons un concept important : les accessoires et le calcul. Les accessoires sont le moyen de transmettre des informations dans les composants Vue.js. Cela nous permet de transmettre des données du composant parent au composant enfant. Dans les composants enfants, nous pouvons utiliser les données transmises pour la liaison et le traitement

Communication entre composants Vue : utilisation d'accessoires pour la communication entre composants parent-enfant Communication entre composants Vue : utilisation d'accessoires pour la communication entre composants parent-enfant Jul 07, 2023 pm 10:06 PM

Communication entre composants Vue : utilisation d'accessoires pour la communication entre composants parent-enfant Dans le développement de Vue, la communication entre composants est un concept très important. Lorsque nous devons transmettre des données d'un composant à un autre, nous pouvons utiliser la propriété props de Vue pour la communication entre les composants parent-enfant. Cet article explique comment utiliser les attributs props pour la communication entre les composants et fournit quelques exemples de code. 1. Qu'est-ce que l'attribut d'accessoires ? Les accessoires sont un attribut important dans Vue, qui est utilisé pour recevoir les données transmises des composants parents aux composants enfants. composant parent

Résoudre l'erreur Vue : impossible d'utiliser correctement les accessoires pour la communication des composants parent-enfant Résoudre l'erreur Vue : impossible d'utiliser correctement les accessoires pour la communication des composants parent-enfant Aug 17, 2023 pm 06:25 PM

Résoudre l'erreur Vue : impossible d'utiliser correctement les accessoires pour la communication entre les composants parent-enfant Dans Vue, la communication entre les composants parent-enfant est une opération très courante et importante. Les accessoires sont un moyen de transférer des données entre les composants Vue, et c'est également le moyen le plus couramment utilisé. Cependant, lors du processus d'utilisation des accessoires pour communiquer entre les composants parents et enfants, il est parfois inévitable de rencontrer certains problèmes, tels que l'incapacité d'utiliser les accessoires pour transférer correctement les données, ce qui entraîne des rapports d'erreurs. Cet article analysera les causes courantes d’erreurs et proposera des solutions. Journaux communs

See all articles