Comment implémenter la communication entre les composants parent et enfant dans Vue ?

Dans Vue, les composants jouent un rôle important dans la création d'une interface utilisateur. Ils peuvent facilement décomposer l'interface en parties plus petites et réutilisables. Puisqu'une page peut contenir plusieurs composants, la communication entre les composants devient importante. Surtout la communication entre les composants parent et enfant.

Vue implémente la communication entre les composants parent et enfant via props et $emit. Cet article vous présentera les deux méthodes.

1. Props

Les props sont la façon dont les composants parents de Vue transmettent les données aux composants enfants. props est un tableau qui stocke les attributs de données à transmettre aux composants enfants. Dans le composant enfant, utilisez des accessoires pour recevoir les données transmises par le composant parent.

Utilisation des accessoires : Tout d'abord, définissez les accessoires dans le composant parent. Le code est le suivant :

<template>
  <child :message="parentMsg"/>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      parentMsg: "父组件的数据",
    };
  },
  components: {
    Child,
  },
  props: ["parentMsg"], //在父组件中定义props
};
</script>

Dans le code ci-dessus, le composant parent transmet une propriété nommée message au composant enfant via les accessoires.

Ensuite, recevez les accessoires dans le composant enfant :

<template>
  <h2>{{ message }}</h2>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true, //props接收的属性必须有值
    },
  },
};
</script>

Dans le composant enfant, l'attribut de message transmis par le composant parent est reçu via les accessoires.

À ce moment, la valeur « données du composant parent » sera affichée sur la page du composant parent.

2. $emit

$emit est la façon dont les composants enfants transmettent des messages aux composants parents. Lorsque certains événements se produisent dans un composant enfant, la méthode événementielle du composant parent peut être déclenchée via $emit. Le premier paramètre de la méthode $emit est le nom de l'événement à déclencher et le deuxième paramètre est le paramètre à transmettre au composant parent.

Utilisation de $emit : Tout d'abord, définissez une méthode événementielle dans le composant enfant Lorsqu'un événement est déclenché, appelez la méthode $emit pour transmettre le message au composant parent. Le code est le suivant :

<template>
  <button @click="onClick">点击传递消息到父组件</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit("child-msg", "子组件的数据");
    },
  },
};
</script>

Dans ce qui précède. code, le composant enfant définit la méthode événementielle onClick. Lorsque le bouton est cliqué, l'événement nommé child-msg sera déclenché via la méthode $emit et le paramètre "données du composant enfant" sera transmis.

Ensuite, écoutez cet événement dans le composant parent :

<template>
  <div>
    <div>{{ message }}</div>
    <child @child-msg="getChildMsg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      message: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getChildMsg(msg) {
      this.message = msg; //监听子组件的事件，获取传递过来的参数
    },
  },
};
</script>

Dans le code ci-dessus, le composant parent utilise le symbole @ pour écouter l'événement du composant enfant. Une fois que le composant enfant déclenche l'événement child-msg, le composant parent répond à l'événement et reçoit les données transmises par le composant enfant via la méthode getChildMsg, puis affiche les données sur la page.

Grâce aux deux méthodes ci-dessus, la communication entre les composants parent et enfant peut être réalisée dans Vue. Le code est concis, facile à comprendre et à maintenir, ce qui peut améliorer l'efficacité du développement des composants.

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!