Comment transférer des valeurs entre les composants parent et enfant de Vue

Cet article explique avec vous comment transférer des valeurs entre les composants parent et enfant de Vue. Le contenu est très bon. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Contexte : je travaille actuellement sur un projet vue. Parce que la logique de la page est relativement complexe et que la quantité de code est importante, je souhaite extraire certains composants et les insérer dans le composant. Le problème se pose alors.
Parce que Vue ne préconise pas de modifier la valeur du composant parent dans le composant enfant, ce sera une étape gênante si vous voulez faire cela. Et j'avais juste besoin d'une telle opération, j'ai donc vérifié les informations
Allons-y. commencez par le code du composant parent. , faisant référence au sous-composant exp-group

<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>

grpVisible et grpData sont des attributs passés au sous-composant, l'un est un type commun et l'autre est un objet

grpVisible: false,
grpData: {app: this.$route.query.app, exp: this.$route.query.exp},

Ensuite, je souhaite Pour modifier les valeurs de ces deux propriétés dans le composant enfant et les transmettre au composant parent, vous devez d'abord les définir dans le composant enfant

props: {
  grpVisible: {
    type: Boolean,
    default: false
  },
  grpData: {
    type: Object
  }
},

Tout d'abord surtout, si vous souhaitez modifier la propriété grpVisible du type ordinaire, vous devez définir une variable pour copier la valeur grpVisible, puis modifier cette variable et la transmettre au composant parent. Pour plus de détails, voir le code.

let demo1 = this.grpVisible
demo1 = true
this.$emit('updateData', demo1) //子组件

Le composant parent reçoit cette valeur via la valeur du paramètre acceptData

acceptData (value) {
  console.log(value)
}, //父组件

S'il s'agit d'un objet, vous devez utiliser Object.assign pour copier une nouvelle affectation dans un variable, puis modifiez la variable et transmettez-la au composant parent. Le code est le suivant :

let demo1 = Object.assign({}, this.grpData)
demo1.app = 'binge'
this.$emit('updateData', demo1)

Recommandations associées :

Comment vue utilise le contrôle arborescent. z-tree pour ajouter dynamiquement des données

Comment JavaScript utilise-t-il DOM pour changer d'image ?

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!