Comment communiquer entre les composants dans vue

Dans Vue.js, la communication entre composants peut être réalisée des manières suivantes : Communication parent-enfant : transmission de données ou déclenchement d'événements via des accessoires. Communication ancêtre-descendant : partage de sources de données via provide/inject. Communication entre composants frères et sœurs : via le bus d'événements, la gestion d'état Vuex ou des événements personnalisés.

Comment communiquer entre les composants dans Vue ?

Introduction :
Dans les applications Vue.js, la communication entre composants est cruciale pour partager des données et des événements. Voici plusieurs façons d'établir une communication entre composants :

Communication parent-enfant :

• Transmission des données via les propriétés : le composant parent transmet les données en tant qu'accessoire au composant enfant, et le composant enfant utilise v-bind pour lier les données.
• Déclenché par des événements : le composant enfant déclenche un événement et transmet les données au composant parent. Le composant parent écoute l'événement dans le modèle du composant parent.

Communication ancêtre-descendant :

• Par fournir/injecter : les composants ancêtres fournissent une source de données et les composants descendants obtiennent des données via injecter.

Communication des composants frères :

• Par le biais du bus d'événements : créez une instance Vue pour agir comme un bus d'événements, et tous les composants peuvent écouter et déclencher des événements.
• Gestion de l'état via Vuex : utilisez la bibliothèque de gestion d'état Vuex pour stocker l'état global et le rendre accessible à tous les composants.

Événements personnalisés :

• Grâce à $emit/$on : déclenchez des événements personnalisés via $emit dans les composants enfants et écoutez les événements via $on dans les composants parents.

Exemple de passage d'attribut :

<code class="HTML"><!-- 父组件 -->
<template>
  <Child-Component :message="message" />
</template></code>

<code class="HTML"><!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template></code>

Exemple de déclenchement par événement :

<code class="HTML"><!-- 子组件 -->
<template>
  <button @click="emitMessage">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', '事件数据');
    }
  }
};
</script></code>

<code class="HTML"><!-- 父组件 -->
<template>
  <Child-Component @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message); // 输出：事件数据
    }
  }
};
</script></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!