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

<script><br>importer ChildComponent depuis './ ChildComponent.vue';</p><p>export par défaut {<br> composants : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>ChildComponent</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { message: 'Hello World' }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>},<br> méthodes : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>handleUpdate(data) { this.message = data; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>

// child Composant ChildComponent.vue

<script><br>export par défaut {<br> props : ['message'],<br> méthodes : { </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>sendMessage() { this.$emit('update', 'Hello Vue'); }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>

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

<script><br>importer ChildComponent1 depuis './ ChildComponent1.vue';<br>importer ChildComponent2 depuis './ChildComponent2.vue';</p><p>exporter les {<br> composants par défaut : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>ChildComponent1, ChildComponent2</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { message: 'Hello World' }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>},<br> méthodes : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>handleUpdateMessage(data) { this.message = data; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br> }<br></script>

// Composant enfant ChildComponent1.vue

<script><br>export default {<br> props : ['message'],<br> méthodes : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>sendMessage() { this.$emit('update-message', 'Hello Vue'); }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>

// Composant enfant ChildComponent2.vue

<script><br>export default {<br> props: ['message']<br>}<br></script>

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!