L'utilisation et la différence entre props et $emit dans Vue

L'utilisation et la différence des accessoires et de $emit dans Vue

Dans Vue, la communication entre les composants est un concept très important. Vue fournit deux méthodes, props et $emit, pour implémenter la communication entre les composants. Cet article présentera en détail l'utilisation et la différence entre props et $emit, et l'illustrera avec des exemples de code.

1. Props
props est un moyen pour les composants parents de transmettre des données aux composants enfants. Le composant parent peut transmettre n'importe quel type de données au composant enfant via des accessoires, et le composant enfant peut recevoir et utiliser ces données.

1.1 Définir des accessoires dans le composant parent

Lors de l'utilisation d'un composant enfant dans le composant parent, vous pouvez transmettre des données au composant enfant en ajoutant des attributs à l'étiquette du composant enfant. Par exemple :

<template>
  <div>
    <!-- 使用子组件，并通过props传递数据 -->
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

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

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

Dans cet exemple, nous transmettons les données au composant enfant en ajoutant un attribut appelé message sur la balise ChildComponent et en définissant la valeur sur la variable message dans le composant parent.

1.2 Recevoir des accessoires dans les composants enfants

Dans les composants enfants, vous pouvez recevoir les données transmises par le composant parent via l'option props. Par exemple :

<template>
  <div>
    <!-- 子组件中使用props -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

Dans cet exemple, nous utilisons l'option props pour définir une propriété appelée message et spécifier son type comme String. Les composants enfants peuvent utiliser directement l'attribut message pour obtenir les données transmises par le composant parent.

2. $emit
$emit est un moyen pour les composants enfants de transmettre des données aux composants parents. Les composants enfants peuvent déclencher un événement personnalisé via $emit et transmettre des données au composant parent.

2.1 Déclenchement d'événements dans les composants enfants

Dans les composants enfants, vous pouvez utiliser this.$emit pour déclencher un événement personnalisé et transmettre des données au composant parent. Par exemple :

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 通过$emit触发一个自定义事件，并向父组件传递数据
      this.$emit('message', 'Hello Vue!')
    }
  }
}
</script>

Dans cet exemple, nous déclenchons un événement personnalisé nommé message en ajoutant un écouteur d'événement @click sur le bouton, en utilisant this.$emit dans la fonction de gestionnaire d'événements et en transmettant un message nommé "Hello Vue!" données.

2.2 Recevoir des événements dans le composant parent

Dans le composant parent, vous pouvez écouter les événements déclenchés par le composant enfant en ajoutant v-on à l'étiquette du composant enfant et recevoir les données transmises dans la fonction de gestionnaire d'événements correspondante. Par exemple :

<template>
  <div>
    <!-- 监听子组件的自定义事件 -->
    <ChildComponent @message="onMessage"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    onMessage(data) {
      // 在事件处理函数中接收子组件传递过来的数据
      console.log('收到消息:', data)
    }
  }
}
</script>

Dans cet exemple, nous utilisons v-on sur la balise ChildComponent pour écouter le message d'événement personnalisé du composant enfant et recevoir les données transmises par le composant enfant dans le gestionnaire d'événements onMessage.

3. La différence entre props et $emit

props et $emit sont tous deux utilisés pour implémenter la communication entre les composants, mais il existe certaines différences dans leur utilisation et leur direction d'action.

Les propriétés sont la manière dont les composants parents transmettent les données aux composants enfants. Les données sont transmises aux composants enfants sous forme d'attributs, et les composants enfants peuvent utiliser l'option props pour déclarer les attributs qu'ils doivent recevoir, puis utiliser ces données comme d'habitude. attributs.

$emit est la manière dont un composant enfant transmet des données à un composant parent. Le composant enfant peut utiliser this.$emit pour déclencher un événement personnalisé et transmettre les données au composant parent, puis utiliser v-on dans le composant parent pour écoutez le composant enfant pour déclencher l'événement et recevoir des données dans la fonction de gestion d'événement correspondante.

Le flux de données des accessoires est un flux unidirectionnel du composant parent vers le composant enfant, et le composant parent transmet les données au composant enfant. Le flux de données de $emit est un flux unidirectionnel du composant enfant vers le composant parent. Le composant enfant transmet les données au composant parent en déclenchant des événements.

Résumé : 
les accessoires sont utilisés par les composants parents pour transmettre des données aux composants enfants. Les données sont transmises aux composants enfants sous forme d'attributs, et les composants enfants reçoivent des données via les options d'accessoires.
$emit est utilisé par le composant enfant pour transmettre des données au composant parent. Le composant enfant déclenche un événement personnalisé via this.$emit et transmet les données au composant parent utilise v-on pour écouter l'événement. déclenché par le composant enfant et répondre à l'événement dans l'événement Recevoir des données dans la fonction de traitement.

Ce qui précède est une introduction détaillée à l'utilisation et aux différences des accessoires et de $emit dans Vue. J'espère que cela vous aidera à comprendre la communication entre les 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!