Utilisation et scénarios courants des événements personnalisés Vue

Utilisation et scénarios courants des événements personnalisés Vue

Vue.js est un framework JavaScript populaire pour la création d'interfaces utilisateur. Dans Vue, nous pouvons implémenter la communication entre les composants via des événements personnalisés. Les événements personnalisés sont l'une des fonctionnalités très utiles de Vue, nous permettant de transmettre des données entre différents composants et de déclencher des comportements spécifiques. Cet article présentera l'utilisation et les scénarios courants des événements personnalisés dans Vue, et fournira des exemples de code spécifiques.

1. Utilisation de base des événements personnalisés

Dans Vue, nous pouvons utiliser la méthode $emit pour déclencher des événements personnalisés. La méthode $emit reçoit deux paramètres. Le premier paramètre est le nom de l'événement à déclencher et le deuxième paramètre est les données à transmettre. Les composants qui reçoivent des événements personnalisés doivent utiliser la directive v-on pour écouter les événements et exécuter la logique associée lorsque l'événement est déclenché.

Voici un exemple simple qui montre comment déclencher un événement personnalisé dans un composant parent et recevoir et gérer l'événement dans un composant enfant :

<!-- 父组件 -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Hello, world!');
    },
    handleEvent(data) {
      console.log(data); // 输出：Hello, world!
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1 id="子组件">子组件</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit('custom-event', 'Hello, world!');
  }
}
</script>

Dans l'exemple ci-dessus, lorsque vous cliquez sur le bouton "Déclencher un événement", le parent composant Un événement personnalisé est déclenché et la chaîne « Hello, world ! » est transmise en tant que données. Le sous-composant écoute l'événement personnalisé via la directive v-on et imprime les données reçues dans la méthode handleEvent.

2. Scénarios courants d'événements personnalisés

1. Communication entre les composants parent et enfant

Les événements personnalisés sont très pratiques pour transférer des données et mettre en œuvre la communication entre les composants parent et enfant. Le composant parent peut transmettre des données au composant enfant via des événements personnalisés et écouter les événements personnalisés déclenchés par le composant enfant pour obtenir les données du composant enfant.

2. Communication entre composants frères et sœurs

Si deux composants n'ont pas de relation parent-enfant, mais ont besoin de communiquer, vous pouvez utiliser le bus d'événements de Vue pour y parvenir. Un bus d'événements est une instance Vue vide utilisée pour partager des événements entre différents composants. Des événements personnalisés peuvent être déclenchés et reçus entre différents composants via les méthodes $emit et $vnode.$on.

Voici un exemple qui montre comment utiliser le bus d'événements pour communiquer entre des composants frères et sœurs :

<!-- 组件A -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  methods: {
    triggerEvent() {
      eventBus.$emit('custom-event', 'Hello, world!');
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <h1 id="组件B">组件B</h1>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  mounted() {
    eventBus.$on('custom-event', data => {
      console.log(data); // 输出：Hello, world!
    })
  }
}
</script>

<!-- eventBus.js -->
import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

Dans l'exemple ci-dessus, le composant A a déclenché un événement personnalisé via le bus d'événements, en transmettant des données. Le composant B écoute les événements personnalisés via le bus d'événements et obtient des données dans la fonction de rappel.

3. Communication entre les composants de plusieurs niveaux

Vue fournit une API de fourniture/injection pour établir la communication entre les composants de plusieurs niveaux. En utilisant provide dans le composant parent pour fournir des données et en utilisant inject dans le composant descendant pour injecter des données, la communication entre les composants à n'importe quel niveau est obtenue.

Voici un exemple qui montre comment utiliser provide et inject pour établir une communication entre les composants de plusieurs niveaux :

<!-- 父组件 -->
<template>
  <div>
    <p>父组件提供的数据：{{ data }}</p>
    <grand-child-component></grand-child-component>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      data: 'Hello, world!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件注入的数据：{{ injectedData }}</p>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>孙子组件注入的数据：{{ injectedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

Dans l'exemple ci-dessus, le composant parent fournit les données "Hello, world through provide, le composant enfant et !" Les données sont injectées dans les composants petits-enfants respectivement via inject et utilisées dans le modèle.

Résumé

Les événements personnalisés sont une fonctionnalité très utile dans Vue, qui peut facilement implémenter la communication entre les composants. Dans Vue, nous pouvons utiliser la méthode $emit pour déclencher des événements personnalisés et écouter les événements via la directive v-on. Les événements personnalisés conviennent à la communication entre les composants parent-enfant, les composants frères et les composants inter-niveaux. J'espère que le grand nombre d'exemples de codes fournis dans cet article pourront vous aider à mieux comprendre l'utilisation et les scénarios courants des événements personnalisés dans Vue.

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!