Comment communiquer entre les composants parent et enfant dans Vue

Avec le développement continu des frameworks front-end, Vue.js est devenu l'un des frameworks préférés de nombreux développeurs. Vue.js est un framework JavaScript progressif qui fournit une méthode de développement efficace, flexible, hautement fiable et maintenable. Dans Vue.js, les composants constituent un concept important. Que vous implémentiez des pages complexes ou que vous créiez des applications composées de composants, vous devez utiliser des composants pour les implémenter.

Dans Vue.js, les composants peuvent être imbriqués dans d'autres composants pour former une relation de composant parent-enfant. À l'heure actuelle, les composants parents et les composants enfants doivent souvent communiquer entre eux pour compléter une logique métier complexe. Cet article explique comment communiquer entre les composants parents et enfants dans Vue.js.

1. Flux de données unidirectionnel

Dans Vue.js, le composant parent transmet les données au composant enfant généralement sous la forme d'un flux de données unidirectionnel, c'est-à-dire que le composant parent transmet les données au composant enfant via le props, et le composant enfant ne peut pas être modifié directement ces données.

Le composant parent transmet les données en définissant les attributs props sur le composant enfant, comme indiqué ci-dessous :

<template>
  <div>
    <!-- 父组件向子组件传递 count 数据 -->
    <child-component :count="count"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      count: 0
    }
  }
}
</script>

Recevez les données transmises par le composant parent via les accessoires du composant enfant, comme indiqué ci-dessous :

<template>
  <div>
    <!-- 子组件通过 props 接收 count 数据 -->
    <div>count: {{ count }}</div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

Cela termine le composant parent Le processus de transmission des données aux sous-composants. Les sous-composants peuvent utiliser les données reçues pour les opérations de rendu, mais ils ne peuvent pas modifier directement les données.

2. Le sous-composant transmet les données au composant parent

Dans Vue.js, le sous-composant transmet les données au composant parent via des événements personnalisés. Le composant enfant déclenche l'événement via la méthode $emit et le composant parent écoute en ajoutant la directive v-on au composant enfant pour lier l'événement.

Par exemple, définissez un bouton dans le composant enfant. Lorsque vous cliquez sur le bouton, un événement est déclenché et les données sont transmises au composant parent via la méthode $emit, comme indiqué ci-dessous :

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData () {
      // 通过 $emit 方法触发事件，并传递数据
      this.$emit('send-data', '这是子组件传递的数据')
    }
  }
}
</script>

Dans le composant parent, utilisez la directive v-on pour lier l'événement et écouter le composant enfant. L'événement déclenché par le composant et reçoit les données transmises par le composant enfant, comme indiqué ci-dessous :

<template>
  <div>
    <!-- 绑定子组件事件，监听子组件触发的事件 -->
    <child-component @send-data="getData"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getData (msg) {
      console.log(msg) // 打印子组件传递的数据
    }
  }
}
</script>

Ceci termine le processus de transmission des données du composant enfant. au composant parent. Le composant enfant déclenche l'événement et transmet les données via la méthode $emit, et le composant parent transmet la directive v-on lie les événements pour écouter et recevoir les données transmises par les sous-composants.

3. Utilisez les attributs $parent et $children

En plus des deux méthodes ci-dessus, Vue.js fournit également deux attributs, $parent et $children, pour implémenter la communication entre les composants parent et enfant. Utilisez la propriété $parent pour accéder aux données et méthodes du composant parent dans le composant enfant, et utilisez la propriété $children pour accéder aux données et méthodes du composant enfant dans le composant parent.

Par exemple, pour accéder aux données et méthodes du composant parent dans le composant enfant, comme indiqué ci-dessous :

<template>
  <div>
    <button @click="getParentData">获取父组件的数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    getParentData () {
      // 使用 $parent 属性访问父组件的数据和方法
      console.log(this.$parent.count) // 访问父组件的 count 数据
      this.$parent.sayHello() // 调用父组件的 sayHello 方法
    }
  }
}
</script>

Pour accéder aux données et méthodes du composant enfant dans le composant parent, vous pouvez utiliser l'attribut $children, comme indiqué ci-dessous :

<template>
  <div>
    <button @click="getChildData">获取子组件的数据</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData () {
      // 使用 $children 属性访问子组件的数据和方法
      console.log(this.$children[0].count) // 访问第一个子组件的 count 数据
      this.$children[0].sayHello() // 调用第一个子组件的 sayHello 方法
    }
  }
}
</script>

Cependant, l'utilisation des attributs $parent et $children pour la communication entre les composants parent et enfant n'est pas conforme aux principes de communication des composants de Vue.js et n'est pas recommandé pour une utilisation fréquente. Parce que cette approche couplera étroitement le composant enfant et le composant parent, ce qui rendra difficile l'expansion et la maintenance du code.

Résumé

Dans Vue.js, les méthodes props et $emit peuvent être utilisées pour implémenter un flux de données unidirectionnel et une liaison bidirectionnelle entre les composants parents et les composants enfants. Vous pouvez également utiliser les attributs $parent et $children pour implémenter le parent. -composants enfants. Quelle que soit la méthode utilisée, il est nécessaire de toujours considérer l'expansion et la maintenance de la communication des composants pour éviter un couplage étroit, rendant ainsi le code plus simple, évolutif et maintenable.

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!