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

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>

Composant enfant :

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

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

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.

2. 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>

Composant enfant :

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

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

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.

3. 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>

Composant enfant :

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

<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

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!