Communication des composants Vue : communication des composants parent-enfant via $parent/$children

Communication des composants Vue : communication des composants parent-enfant via $parent/$children

Introduction :
Dans le développement de Vue, les composants sont les unités de base qui constituent les applications. La communication entre les composants est la clé du transfert de données et de l'interaction entre les composants. Il existe de nombreuses façons pour les composants de communiquer dans Vue. L'une des méthodes les plus courantes consiste à communiquer entre les composants parent et enfant via $parent et $children. Cet article expliquera en détail comment utiliser $parent et $children pour la communication des composants et fournira des exemples de code pour une meilleure compréhension et application.

1. Communication du composant parent au composant enfant via $parent

1.1 Le composant parent transmet les données au composant enfant

Dans Vue, le composant parent transmet les données au composant enfant en liant les propriétés du composant enfant. Les composants enfants peuvent recevoir des données transmises par le composant parent via props et les utiliser dans le composant lui-même. props 接收父组件传递的数据，并在组件自身中使用。

示例代码如下：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        message: 'Hello, child component!'
      };
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    props: ['message']
  }
</script>

在父组件中，将 message 数据通过 :message="message" 的方式传递给子组件。子组件中接收到父组件传递的数据并在组件中进行渲染。

1.2 子组件向上级组件派发事件

在某些情况下，子组件需要向其父组件派发事件以通知父组件进行相应的操作。Vue 提供了 $emit 方法用于在子组件中派发自定义事件。

示例代码如下：

<!-- 父组件 -->
<template>
  <div>
    <child-component @childEvent="handleChildEvent"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent
    },
    methods: {
      handleChildEvent(payload) {
        // 处理子组件派发的事件
        console.log(payload);
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div @click="handleClick"></div>
</template>
<script>
  export default {
    methods: {
      handleClick() {
        // 派发自定义事件，并传递给父组件
        this.$emit('childEvent', 123);
      }
    }
  }
</script>

在子组件中，通过 @click 方法触发 handleClick 方法，在该方法中通过 this.$emit 派发自定义事件，同时传递给父组件。父组件中通过 @childEvent 监听自定义事件，并在 handleChildEvent 方法中处理子组件派发的事件。

二、通过 $children 进行子组件向父组件通信

有时候，子组件需要与其直接的父组件进行通信。Vue 提供了 $children 属性，用于获取子组件的实例。通过该属性，可以访问到子组件的实例，从而实现子组件向父组件通信。

示例代码如下：

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
    <button @click="changeChildData">改变子组件的数据</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent
    },
    methods: {
      changeChildData() {
        // 修改子组件的数据
        this.$children[0].childData = 'Hello, parent component!';
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>{{ childData }}</div>
</template>
<script>
  export default {
    data() {
      return {
        childData: 'Hello, child component!'
      }
    }
  }
</script>

在父组件中，通过 this.$children[0]

L'exemple de code est le suivant :

rrreee
Dans le composant parent, transmettez les données message au composant enfant via :message="message". Le composant enfant reçoit les données transmises par le composant parent et les restitue dans le composant.

🎜1.2 Les sous-composants envoient des événements aux composants supérieurs🎜🎜Dans certains cas, les sous-composants doivent envoyer des événements à leurs composants parents pour avertir le composant parent d'effectuer les opérations correspondantes. Vue fournit la méthode $emit pour distribuer des événements personnalisés dans les composants enfants. 🎜🎜L'exemple de code est le suivant : 🎜rrreee🎜Dans le composant enfant, déclenchez la méthode handleClick via la méthode @click, et dans cette méthode transmettez this .$emit code> distribue des événements personnalisés et les transmet au composant parent. Le composant parent écoute les événements personnalisés via <code>@childEvent et gère les événements distribués par le composant enfant dans la méthode handleChildEvent. 🎜🎜2. Utilisez $children pour communiquer des composants enfants vers les composants parents🎜🎜Parfois, les composants enfants doivent communiquer avec leurs composants parents directs. Vue fournit l'attribut $children pour obtenir des instances de composants enfants. Grâce à cet attribut, vous pouvez accéder à l'instance du composant enfant, permettant ainsi au composant enfant de communiquer avec le composant parent. 🎜🎜L'exemple de code est le suivant : 🎜rrreee🎜Dans le composant parent, obtenez l'instance du composant enfant via this.$children[0], puis effectuez les opérations correspondantes via les propriétés et méthodes de l'instance du composant enfant. 🎜🎜Conclusion : 🎜Grâce à l'introduction de cet article, je pense que les lecteurs ont une compréhension plus profonde de la communication entre les composants via $parent et $children. Dans le développement réel, selon des scénarios commerciaux spécifiques, vous pouvez choisir une méthode appropriée de communication des composants afin d'améliorer la maintenabilité et l'évolutivité de l'application. J'espère que cet article pourra être utile aux lecteurs. 🎜

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!