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

rrreee

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!