Comment transmettre des paramètres à des composants non pertinents dans Vue

Dans Vue, les composants peuvent généralement transmettre des données via des attributs d'accessoires, mais nous devons parfois transmettre des données entre des composants non liés.

Par exemple, nous pouvons avoir besoin de transmettre des données d'un composant à un autre composant, mais les deux composants peuvent n'avoir aucune connexion. Dans ce cas, nous pouvons utiliser le système d'événements de Vue pour implémenter la communication entre les composants non parents et enfants. Plus précisément, nous pouvons utiliser les méthodes $on et $emit dans Vue pour envoyer et recevoir des événements.

La méthode $on est utilisée pour enregistrer un événement personnalisé dans le composant actuel Lorsque l'événement est déclenché, le composant actuel peut effectuer l'opération correspondante. La méthode $emit est utilisée pour déclencher un événement personnalisé et transmettre les paramètres spécifiés à tous les composants écoutant l'événement.

L'exemple est le suivant :

<!-- 组件A -->
<template>
  <div>
    <!-- 触发事件 -->
    <button @click="sendDataToB">传递数据给组件B</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToB() {
      // 发送事件
      this.$emit('sendData', '这是来自组件A的数据')
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <!-- 监听事件并接收数据 -->
    <div>收到的数据：{{ receivedData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: ''
    }
  },
  mounted() {
    // 监听事件
    this.$on('sendData', (data) => {
      this.receivedData = data
    })
  }
}
</script>

Dans cet exemple, nous avons enregistré un événement personnalisé nommé "sendData" dans le composant A et utilisé la méthode $emit pour déclencher l'événement. La méthode $emit transmettra la chaîne "Ceci sont les données du composant A" en tant que paramètre à tous les composants écoutant l'événement.

Dans le composant B, nous utilisons la méthode $on dans le hook de cycle de vie monté pour écouter l'événement "sendData" et mettre à jour les données reçuesData du composant B dans la fonction de réponse. À ce stade, le composant B peut recevoir les données transmises par le composant A.

Il convient de noter que la communication entre les composants non parents et enfants doit être implémentée à l'aide d'un système d'événements spécialisé, afin d'éviter une imbrication infinie de poupées entre les composants et de rendre le code difficile à maintenir. Par conséquent, dans le développement réel, nous devrions essayer de limiter la communication entre les composants aux composants parent-enfant.

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!