Quels sont les moyens de transmettre des valeurs dans les composants vue ?

Méthode de transfert de valeur du composant Vue : 1. Utilisez des accessoires pour transmettre les données. Le composant parent transmet les données au composant enfant via les attributs HTML, et le composant enfant reçoit les données transmises via les accessoires. 2. Utilisez $emit pour déclencher l'événement ; pour transmettre les données. , le sous-composant utilise $emit pour déclencher des événements personnalisés et le composant parent utilise v-on pour écouter les événements personnalisés du sous-composant 3. Utilisez provide/inject pour transmettre les valeurs à travers les niveaux, le composant parent fournit des données via provide et le sous-composant utilise inject pour recevoir des données.

L'environnement d'exploitation de ce tutoriel : système Windows 10, ordinateur Dell g3.

Le transfert de valeur entre les composants Vue peut être réalisé de trois manières : props, $emit et provide/inject.

Utilisez des accessoires pour transmettre des données :

Transmettez les données aux composants enfants via les attributs HTML du composant parent. Les composants enfants reçoivent les données transmises par les composants parents via des accessoires.

Composant parent :

<template>
  <div>
    <ChildComponent :message="message"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

Composant enfant :

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

Utilisez $emit pour déclencher des événements afin de transmettre des données :

Utilisez $emit dans les composants enfants pour déclencher des événements personnalisés et transmettre les données qui doivent être transmises en tant que paramètres. Le composant parent utilise v-on pour écouter les événements personnalisés du composant enfant et obtenir les données transmises.

Composant parent :

<template>
  <div>
    <ChildComponent v-on:custom-event="updateData"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;&#39;
    }
  },
  methods: {
    updateData(data) {
      this.message = data;
    }
  }
}
</script>

Composant enfant :

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateMessage() {
      this.$emit(&#39;custom-event&#39;, &#39;New Message&#39;);
    }
  }
}
</script>

Utilisez provide/inject pour le transfert de valeur entre niveaux :

Fournissez des données via provide dans le composant parent, puis utilisez inject pour recevoir les données dans le composant enfant .

Composant Parent :

<template>
  <div>
    <ChildComponent />
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

Composant Enfant :

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  inject: [&#39;message&#39;]
}
</script>

Voici les trois façons dont les composants Vue transmettent des valeurs. Selon des scénarios et des besoins spécifiques, vous pouvez choisir une méthode appropriée pour transférer des données 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!