Communication des composants Vue : utilisation de $on pour l'écoute d'événements personnalisés

Communication des composants Vue : utilisez $on pour une écoute d'événements personnalisée

Dans Vue, les composants sont indépendants et chaque composant a son propre cycle de vie et ses propres données. Cependant, dans le processus de développement lui-même, la communication entre les composants est inévitable. Vue fournit un moyen très flexible et efficace de communication entre composants : l'écoute d'événements personnalisés. Le mécanisme d'écoute d'événements personnalisé de

Vue est implémenté sur la base du modèle de publication-abonnement. Vous pouvez écouter un événement personnalisé dans un composant en utilisant la méthode $on de l'instance Vue et déclencher l'événement dans d'autres composants via la méthode $emit. Ci-dessous, nous présenterons en détail comment utiliser $on pour la surveillance d'événements personnalisés.

Tout d'abord, créons un exemple simple de composant parent-enfant. Le composant parent est App.vue et le composant enfant est Child.vue.

App.vue :

<template>
  <div>
    <h2>App Component</h2>
    <button @click="notifyChild">通知子组件</button>
    <Child></Child>
  </div>
</template>

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

  export default {
    name: 'App',
    components: {
      Child
    },
    methods: {
      notifyChild() {
        this.$emit('customEvent', 'Hello Child Component!');
      }
    }
  }
</script>

Child.vue :

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      this.$parent.$on('customEvent', this.handleCustomEvent);
    },
    beforeDestroy() {
      this.$parent.$off('customEvent', this.handleCustomEvent);
    },
    methods: {
      handleCustomEvent(message) {
        this.message = message;
      }
    }
  }
</script>

Dans le composant parent App.vue, nous déclenchons un événement personnalisé customEvent en cliquant sur le bouton et transmettons un message au composant enfant. customEvent，并传递一个消息给子组件。

子组件Child.vue中，我们在mounted生命周期钩子函数中使用this.$parent.$on方法监听父组件中的自定义事件customEvent。并在beforeDestroy生命周期钩子函数中使用this.$parent.$off方法取消监听。在方法handleCustomEvent中，我们将父组件传递的消息赋值给子组件的message。

通过以上代码示例，我们实现了父子组件之间的通信。当点击父组件中的按钮时，子组件会接收到父组件传递的消息并将其显示出来。

除了父子组件之间的通信，我们还可以在任意两个组件之间建立通信。只需在其中一个组件中使用this.$on监听自定义事件，然后在另一个组件中使用this.$emit

Dans le composant enfant Child.vue, nous utilisons la méthode this.$parent.$on dans la fonction hook de cycle de vie montée pour écouter l'événement personnalisé customEvent dans le composant parent. Et utilisez la méthode this.$parent.$off dans la fonction hook du cycle de vie beforeDestroy pour annuler l'écoute. Dans la méthode handleCustomEvent, nous affectons le message passé par le composant parent au message du composant enfant.

Grâce à l'exemple de code ci-dessus, nous avons réussi à communiquer entre les composants parent et enfant. Lorsque vous cliquez sur le bouton du composant parent, le composant enfant recevra le message transmis par le composant parent et l'affichera. 🎜🎜En plus de la communication entre les composants parent et enfant, nous pouvons également établir une communication entre deux composants quelconques. Utilisez simplement this.$on dans un composant pour écouter l'événement personnalisé, puis utilisez this.$emit pour déclencher l'événement dans un autre composant. 🎜🎜En résumé, grâce à la méthode $on de Vue pour la surveillance personnalisée des événements, nous pouvons obtenir une communication flexible et efficace entre les composants. Qu'il s'agisse de communication entre les composants parent et enfant ou de communication entre deux composants quelconques, cela peut être géré facilement. J'espère que cet article vous aidera à résoudre les problèmes de communication des composants dans le développement de 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!