Comment utiliser $parent et $children pour communiquer entre les composants parent et enfant dans Vue ?

Comment utiliser $parent et $children pour la communication entre composants parent-enfant dans Vue ?

Dans Vue, les composants sont l'unité de base pour créer des applications. Dans le processus de développement, la communication entre les composants est une exigence très courante. Vue fournit des méthodes intégrées pour implémenter la communication entre les composants, notamment $parent et $children.

$parent fait référence au composant parent du composant actuel et $children fait référence à tous les composants enfants du composant actuel. Grâce à eux, nous pouvons transmettre des données et appeler des méthodes entre les composants parents et enfants.

Ensuite, nous utiliserons un exemple simple pour montrer comment utiliser $parent et $children pour la communication des composants parent-enfant.

Tout d'abord, nous devons créer un composant parent et un composant enfant. Dans le composant parent, nous allons créer une propriété data et la transmettre au composant enfant. Le composant enfant modifiera ces données et transmettra les données modifiées au composant parent.

Le code du composant parent est le suivant :

<template>
  <div>
    <h2>父组件</h2>
    <p>父组件的数据：{{ parentData }}</p>
    <child-component :childData="parentData" @change="handleChange"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue"

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: "父组件初始数据"
    }
  },
  methods: {
    handleChange(newData) {
      this.parentData = newData
    }
  }
}
</script>

Dans le composant parent, on passe les données du composant parent parentData au composant enfant ChildComponent, et pass @change< /code>Écoutez l'événement <code>change du composant enfant Lorsque les données du composant enfant changent, les données du composant parent seront mises à jour via le . méthode handleChange. parentData传递给子组件ChildComponent，并通过@change监听子组件的change事件，当子组件的数据发生变化时，将通过handleChange方法更新父组件的数据。

接下来，我们来看一下子组件的代码：

<template>
  <div>
    <h4>子组件</h4>
    <p>子组件的数据：{{ childData }}</p>
    <button @click="handleClick">修改父组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      const newData = this.childData + "（已修改）"
      this.$emit("change", newData)
    }
  }
}
</script>

在子组件中，我们接收父组件传递过来的数据childData作为props，并渲染到页面上。当点击按钮时，通过handleClick方法修改子组件的数据，然后通过$emit方法触发change

Ensuite, examinons le code du composant enfant :

rrreee

Dans le composant enfant, nous recevons les données childData transmises par le composant parent en tant qu'accessoires et les restituons sur la page. Lorsque vous cliquez sur le bouton, les données du sous-composant sont modifiées via la méthode handleClick, puis l'événement change est déclenché via le $emit méthode et les données modifiées sont transmises au composant parent.

À ce stade, nous avons terminé le transfert de données et la communication entre les composants parent et enfant. Lorsque nous rendons le composant parent sur la page, nous pouvons voir que les données du composant parent et les données du composant enfant sont affichées correctement, et lorsque vous cliquez sur le bouton du composant enfant, les données du composant parent seront modifié en conséquence. 🎜🎜Grâce aux exemples ci-dessus, nous pouvons voir que l'utilisation de $parent et $children peut facilement transférer et communiquer des données entre les composants parent et enfant. Cependant, comme il existe un certain couplage entre les composants parents et enfants, dans le processus de développement lui-même, nous devons choisir la méthode de communication appropriée en fonction de besoins et de scénarios spécifiques. 🎜

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!