Analyse du schéma de mise à jour des données dans la communication des composants Vue

Analyse du schéma de mise à jour des données dans la communication des composants Vue

Dans le développement de Vue, la communication des composants joue un rôle essentiel. Dans la communication des composants, la mise à jour des données est un maillon essentiel. Cet article analysera le schéma de mise à jour des données dans la communication des composants Vue et l'illustrera à travers des exemples de code.

1. Communication entre composants parent-enfant

Dans la communication entre composants parent-enfant, le composant parent peut transmettre des données au composant enfant via des accessoires, et le composant enfant peut envoyer des données au composant parent via l'événement $emit.

Exemple de code :

// Composant parent App.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component :message="message" @update="handleUpdate"></child-component>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
importer ChildComponent depuis './ ChildComponent.vue';

export par défaut {
composants : {

ChildComponent

},
data() {

return {
  message: 'Hello World'
}

},
méthodes : {

handleUpdate(data) {
  this.message = data;
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

// child Composant ChildComponent.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="sendMessage">发送消息</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export par défaut {
props : ['message'],
méthodes : {

sendMessage() {
  this.$emit('update', 'Hello Vue');
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

Dans cet exemple, le composant parent transmet l'attribut message au composant enfant via des accessoires. Lorsque le composant enfant clique sur le bouton, un événement de mise à jour est envoyé au composant parent via l'événement $emit, et "Hello Vue" est transmis en tant que données. Une fois que la méthode handleUpdate du composant parent a reçu les données, elle les affecte au message, mettant ainsi à jour les données.

2. Communication entre composants frères et sœurs

Dans la communication entre composants frères et sœurs, vous pouvez définir des données dans le composant parent commun, puis mettre à jour les données via des accessoires et des événements respectivement.

Exemple de code :

// Composant parent App.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component1 :message="message" @update-message="handleUpdateMessage"></child-component1>
<child-component2 :message="message"></child-component2>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
importer ChildComponent1 depuis './ ChildComponent1.vue';
importer ChildComponent2 depuis './ChildComponent2.vue';

exporter les {
composants par défaut : {

ChildComponent1,
ChildComponent2

},
data() {

return {
  message: 'Hello World'
}

},
méthodes : {

handleUpdateMessage(data) {
  this.message = data;
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

// Composant enfant ChildComponent1.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="sendMessage">发送消息</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
props : ['message'],
méthodes : {

sendMessage() {
  this.$emit('update-message', 'Hello Vue');
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

// Composant enfant ChildComponent2.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<p>{{ message }}</p>

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
props: ['message']
}
2cacc6d41bbb37262a98f745aa00fbf0

Dans cet exemple, les données d'un message sont définies dans le composant parent App.vue , et l'a transmis aux deux sous-composants ChildComponent1 et ChildComponent2. Lorsque ChildComponent1 clique sur le bouton, un événement de message de mise à jour est envoyé au composant parent via l'événement $emit, et "Hello Vue" est transmis en tant que données. Une fois que la méthode handleUpdateMessage du composant parent a reçu les données, elle les affecte au message. Étant donné que ChildComponent2 est également lié à la propriété message, ChildComponent2 mettra automatiquement à jour l'affichage lorsque le message est mis à jour.

Résumé

Grâce aux accessoires et aux événements, nous pouvons mettre à jour les données dans la communication des composants Vue. Dans la communication entre composants parent-enfant, le composant parent transmet les données au composant enfant via des accessoires, et le composant enfant envoie une demande de mise à jour des données au composant parent via l'événement $emit. Dans la communication entre composants frères et sœurs, vous pouvez définir des données dans le composant parent commun, puis mettre à jour les données via des accessoires et des événements. Ces solutions de mise à jour des données ont été largement utilisées dans le développement réel de Vue, nous aidant à mieux mettre en œuvre la communication des composants et les mises à jour des données.

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!