Introduction à la fonction de transfert de valeur de composant parent-enfant dans le document Vue

Vue est un framework JavaScript populaire qui offre un moyen simple et pratique de créer des interfaces utilisateur. Dans Vue, les composants sont les unités de base pour créer des applications. Les composants peuvent être imbriqués dans d'autres composants pour former une relation parent-enfant. La communication entre les composants est un aspect important des applications Vue, en particulier la communication entre les composants parents et enfants. Dans Vue, la communication entre les composants parent et enfant peut être réalisée en transmettant des propriétés ou des méthodes via le composant parent. Cet article présentera la fonction de transfert de valeur de composant parent-enfant dans le document Vue.

Le composant parent transmet les propriétés aux composants enfants

Dans Vue, les propriétés sont l'un des moyens de communication les plus élémentaires entre les composants parent et enfant. Le composant parent transmet les propriétés au composant enfant via l'option props du composant enfant. L'option props dans un composant enfant déclare un tableau contenant une liste de propriétés que le composant enfant peut accepter. Les composants enfants peuvent alors accéder à ces propriétés comme s'ils lisaient l'état local.

Le code suivant montre comment transmettre des propriétés aux composants enfants dans Vue :

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: "Hello from parent component"
    };
  }
};
</script>

Dans cet exemple, la méthode de transmission des propriétés des composants parents aux composants enfants est utilisée. Parmi eux, une propriété parentMessage est définie dans le composant parent, puis liée à la propriété message du composant enfant child-component. Lorsqu'un composant enfant reçoit une propriété, la propriété est disponible dans le composant. parentMessage，然后将其绑定到子组件child-component的message属性上。当子组件接受到属性时，在组件内就可以使用该属性。

子组件向父组件传递事件

Vue中的另一种常见的父子组件之间的通信方式是通过子组件向父组件传递事件。子组件可以通过$emit方法触发自定义事件，并将数据作为参数传递给父组件。

以下代码展示了如何在Vue中实现子组件向父组件传递事件：

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit("button-clicked", "button clicked from child component");
    }
  }
};
</script>

在这个例子中，子组件采用click事件触发handleClick方法，该方法使用this.$emit方法向父组件传递了名称为button-clicked的自定义事件。在父组件中，可使用v-on指令监听该事件并执行回调函数。

<template>
  <div>
    <child-component @button-clicked="handleButtonClick"></child-component>
    <p> Message from child component: {{ messageFromChild }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ""
    };
  },
  methods: {
    handleButtonClick(data) {
      this.messageFromChild = data;
    }
  }
};
</script>

在这个例子中，父组件使用v-on指令监听子组件的点击事件button-clicked

Le sous-composant transmet les événements au composant parent

Une autre méthode de communication courante entre les composants parent et enfant dans Vue consiste à transmettre les événements au composant parent via le composant enfant. Les composants enfants peuvent déclencher des événements personnalisés via la méthode $emit et transmettre des données au composant parent en tant que paramètres.

Le code suivant montre comment implémenter un composant enfant pour transmettre des événements à un composant parent dans Vue : 🎜rrreee🎜Dans cet exemple, le composant enfant utilise l'événement click pour déclencher la méthode handleClick, qui utilise this La méthode .$emit délivre un événement personnalisé nommé bouton-cliqué au composant parent. Dans le composant parent, vous pouvez utiliser la directive v-on pour écouter l'événement et exécuter la fonction de rappel. 🎜rrreee🎜Dans cet exemple, le composant parent utilise la directive v-on pour écouter l'événement de clic bouton-cliqué du composant enfant et utilise les données transmises par le composant enfant dans la fonction de rappel pour mettre à jour l'état du composant parent. 🎜🎜Résumé🎜🎜La communication entre les composants parent et enfant est un aspect important des applications Vue. Dans la documentation Vue, plusieurs façons d'implémenter la communication entre les composants parents et enfants sont fournies. Cet article présente deux méthodes de communication : le composant parent transmettant des propriétés aux composants enfants et les composants enfants transmettant des événements aux composants parents. Ces méthodes permettent aux développeurs de créer facilement des composants Vue complexes. Si vous souhaitez en savoir plus sur la communication des composants dans Vue, vous pouvez lire davantage la documentation officielle de Vue. 🎜

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!