Comment transmettre des données entre les composants Vue ?

Le contenu de cet article est de présenter comment transférer des données entre les composants Vue ? Laissez tout le monde comprendre le transfert de données entre les composants Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Le composant parent transmet les données aux composants enfants

Dans Vue, vous pouvez utiliser des accessoires pour transmettre des données aux composants enfants.

Partie sous-composant :

C'est la partie HTML de header.vue, le logo est une variable définie dans data.

Si vous avez besoin d'obtenir la valeur du logo du composant parent, vous devez utiliser props : ['logo']

Après avoir ajouté des éléments dans les accessoires, il n'est pas nécessaire d'ajouter des variables dans les données

Composant parent :

Lors de l'appel du composant, utilisez v-bind pour lier la valeur du logo à la variable logoMsg

définie dans App.vue et vous pourrez ensuite ajouter à App.vue La valeur de logoMsg est transmise à header.vue :

2. Le composant enfant transmet les données au composant parent

Les composants enfants transmettent principalement des données aux composants parents via des événements

Partie sous-composant :

Voici la partie HTML de login.vue, when

déclarez d'abord une méthode setUser et utilisez l'événement change pour appeler setUser

Dans setUser, $emit est utilisé pour parcourir l'événement transferUser et renvoyer this.username

où transferUser est un événement personnalisé avec une fonction similaire à un transfert, this.username transmettra ceci L'événement est passé au composant parent

Partie du composant parent :

Dans le composant parent App.vue, une méthode getUser est déclaré et la méthode getUser est appelée avec l'événement transferUser, obtenez le paramètre username

getUser Le paramètre msg dans la méthode getUser est le paramètre username

<.>

transmis du sous-composant

3. Les sous-composants transmettent les données aux sous-composants

Vue ne transmet pas les données. avoir une méthode directe pour transmettre les paramètres de sous-à-sous-composants. Il est recommandé de transmettre les données aux sous-composants. Les sous-composants sont tous fusionnés en un seul composant. Si vous devez transmettre des paramètres d'enfant à enfant, vous pouvez d'abord les transmettre au composant parent, puis au composant enfant.

Afin de faciliter le développement, Vue a lancé un outil de gestion d'état Vuex, qui peut facilement réaliser le transfert de paramètres 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!