Maison > interface Web > Voir.js > le corps du texte

Méthode d'implémentation de la fonction de transfert de valeur parent-enfant du composant dans le document Vue

PHPz
Libérer: 2023-06-20 11:12:10
original
1410 Les gens l'ont consulté

Vue est un framework JavaScript populaire. Son développement de composants peut nous aider à améliorer le degré de modularité lors du développement d'applications complexes, ainsi qu'à améliorer la maintenabilité et l'évolutivité du code. Dans Vue, le transfert de données entre les composants est une exigence très courante, et le scénario le plus courant est le transfert de données entre les composants parents et enfants. Afin d'implémenter ce type de transfert de données dans Vue, nous devons comprendre la méthode d'implémentation du transfert de valeur entre les composants parents et enfants.

Dans les composants Vue, un composant parent peut avoir plusieurs composants enfants en même temps. Le composant parent peut transmettre des données aux composants enfants. Ces données peuvent être les données du composant parent ou la valeur de retour de la fonction du parent. composant appelant le composant enfant. Plus précisément, il existe les manières suivantes d'implémenter le transfert de valeur parent-enfant d'un composant dans Vue :

  1. Props transférer des données
    Dans Vue, nous pouvons déclarer l'attribut props dans le composant enfant, puis le transmettre sous la forme d'un attribut dans le composant parent Données dans les composants enfants. Les composants enfants peuvent recevoir ces données en utilisant les propriétés déclarées dans l'attribut props.

Exemple de code :

Composant parent :

<template>
  <div>
    <child-component :msg="helloWorld"></child-component>
  </div>
</template>

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

  export default {
    data() {
      return {
        helloWorld: 'Hello World!'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>
Copier après la connexion

Composant enfant :

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
  export default {
    props: {
      msg: String
    }
  }
</script>
Copier après la connexion

Dans cet exemple, nous déclarons un attribut props dans le composant enfant, son nom est msg et son type est String. Lors de l'utilisation d'un composant enfant dans un composant parent, nous utilisons la directive v-bind pour lier l'attribut helloWorld du composant parent à l'attribut msg du composant enfant.

  1. Le composant enfant transmet les données au composant parent via l'événement $emit
    Dans Vue, nous pouvons transmettre des données au composant parent en déclenchant des événements. Le composant enfant peut déclencher un événement personnalisé en appelant la fonction $emit, et les données qui doivent être transmises peuvent être transmises au composant parent en tant que paramètres d'événement.

Exemple de code :

Composant parent :

<template>
  <div>
    <child-component @message-sent="showMessage"></child-component>
  </div>
</template>

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

  export default {
    methods: {
      showMessage(msg) {
        console.log(msg)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>
Copier après la connexion

Composant enfant :

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

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('message-sent', 'Hello World!')
      }
    }
  }
</script>
Copier après la connexion

Dans cet exemple, nous ajoutons un bouton au composant enfant Lorsque vous cliquez sur le bouton, le composant enfant appelle la fonction sendMessage et déclenche la création d'un. événement personnalisé nommé message-sent et transmettez le paramètre « Hello World ! » au composant parent.

  1. Obtenir l'instance du sous-composant via l'attribut ref
    Dans Vue, nous pouvons obtenir l'instance du sous-composant en y ajoutant l'attribut ref, puis appeler directement les méthodes et propriétés sur cette instance.

Exemple de code :

Composant parent :

<template>
  <div>
    <button @click="showMessage">Click Me</button>
    <child-component ref="child"></child-component>
  </div>
</template>

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

  export default {
    methods: {
      showMessage() {
        console.log(this.$refs.child.message)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>
Copier après la connexion

Composant enfant :

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>
Copier après la connexion

Dans cet exemple, nous définissons un message d'attribut de données dans le composant enfant et obtenons le composant enfant via l'attribut ref dans l'exemple de composant parent. Lorsque vous cliquez sur le bouton, le composant parent obtient l'instance du composant enfant via this.$refs.child, puis accède directement à la propriété de message qui s'y trouve.

Résumé :
Ci-dessus sont quelques façons courantes d'implémenter le transfert de valeur parent-enfant d'un composant dans Vue. Parmi eux, Props est la méthode de transmission de données la plus couramment utilisée, qui peut rendre le type de transfert de données entre les composants clair et clair, et a une meilleure lisibilité et maintenabilité et la méthode de transmission des données au composant parent via l'événement $emit est ; applicable Il convient aux scénarios dans lesquels des opérations ou des données doivent être effectuées dans des sous-composants mais ne peuvent pas être réalisées via des accessoires. La méthode d'obtention d'instances de sous-composant via les attributs ref convient aux situations où le composant parent doit opérer directement sous-composant. données ou fonctions 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!