Maison > interface Web > Voir.js > Comment communiquer entre les composants dans vue

Comment communiquer entre les composants dans vue

下次还敢
Libérer: 2024-04-30 02:09:19
original
958 Les gens l'ont consulté

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

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>
Copier après la connexion
<code class="HTML"><!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template></code>
Copier après la connexion

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>
Copier après la connexion
<code class="HTML"><!-- 父组件 -->
<template>
  <Child-Component @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message); // 输出:事件数据
    }
  }
};
</script></code>
Copier après la connexion

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!

Étiquettes associées:
vue
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal