Méthodes de communication entre les composants frères et sœurs de Vue

Dans les projets, nous rencontrons souvent des situations où des composants frères et sœurs communiquent. Dans les grands projets, nous pouvons facilement gérer les problèmes de communication entre les composants en introduisant vuex, mais dans certains petits projets, nous n'avons pas besoin d'introduire vuex. Ce qui suit est une brève introduction à la méthode d'utilisation des méthodes traditionnelles pour réaliser la communication entre les composants parent et enfant. Cet article présente principalement la méthode de communication des composants Vue Brother (sans utiliser Vuex). L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Exemple simple : nous cliquons sur le bouton dans le composant a et transmettons les informations au composant b, afin que le composant b apparaisse.

L'idée principale est : Passer d'abord de fils à père, puis de père en fils

Tout d'abord, dans le a.vue, nous lions un événement handleClick au bouton du bouton. Dans l'événement, nous utilisons la méthode this.$emit() pour déclencher un événement personnalisé et transmettre nos paramètres.

Dans l'exemple, nous utilisons this.$emit() pour déclencher l'événement personnalisé de la méthode isLogFn et transmettre le paramètre de journal

a.vue

<template>
 <p class="ap">
 <p>a组件</p>
 <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
 </p>
</template>

<script>

export default {
 methods: {
 handleClick () {
  this.$emit(&#39;isLogFn&#39;,&#39;log&#39;)
 }
 }
}
</script>

<style>
.ap{
 width: 400px;
 height: 200px;
 border: 1px solid #000;
 margin: 0 auto;
}
</style>

La deuxième étape consiste à écouter cet événement personnalisé dans le composant parent, à déclencher la méthode correspondante et à accepter les paramètres passés par le composant a. À ce stade, nous avons terminé le processus de transmission des valeurs du composant enfant au composant parent.

Dans l'exemple, 6c308ffe89a04ab972e01e2ed2aebe937b4447cf690b926cb947a42dad719d04 écoute isLogFn pour déclencher la méthode lisLogFn que nous avons définie dans le composant parent et obtient les données « journal » transmises. Complétez le transfert de valeur du fils au père.

À ce stade, tout le processus n’est pas encore terminé, il n’est qu’à moitié terminé. Ensuite, nous devons terminer le transfert de valeur entre les composants parent et enfant et transmettre les informations du composant a au composant b.

Liez l'attribut islog dans la balise 2985cc1226399aa1741cab4a58d566ff et liez dynamiquement le champ de connexion dans data. Après avoir obtenu les « données » via la méthode lisLogFn, nous devons juger les données transmises par data. Déterminez le résultat pour modifier les données dans data(), transmettant ainsi les données au composant b

App.vue

<template>
 <p id="app">
 <aPage @isLogFn = "lisLogFn"></aPage>
 <bPage :isLog = "login"></bPage>
 </p>
</template>

<script>

import aPage from &#39;./components/a.vue&#39;
import bPage from &#39;./components/b.vue&#39;

export default {
 data () {
 return {
  login: &#39;false&#39;
 }
 },
 name: &#39;app&#39;,
 components: {
 aPage,
 bPage
 },
 methods: {
 lisLogFn (data) {
  if (data == &#39;log&#39;) {
  this.login = &#39;true&#39;
  }
 }
 }
}
</script>

<style>
</style>

Enfin, dans le composant b Vous devez créer des accessoires et définir un attribut isLog. Cet attribut est la valeur que nous avons transmise. Nous traitons ensuite ces données dans une propriété calculée, qui est finalement utilisée par le composant b. Dans l'exemple, nous utilisons v-show="isLogin" pour contrôler si la fenêtre contextuelle est ouverte.

N'oubliez pas ! Ces accessoires ne peuvent pas être utilisés directement, ils doivent être traités par traitement informatique. La raison en est que je cite la description officielle de la vue

Flux de données unidirectionnel

b.vue

<template>
 <p class="bp" v-show="isLogin">我是组件B弹窗</p>
</template>

<script>
export default {
 props: [&#39;isLog&#39;],
 data () {
 return {

 }
 },
 computed: {
 isLogin () {
  if(this.isLog == &#39;true&#39;){
  return true
  } else {
  return false
  }
 }
 }
}
</script>

<style>
 .bp{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

</style>

Résumé : Si vous souhaitez mettre en œuvre un transfert de valeur entre les composants frères et sœurs, vous devez d'abord vous familiariser avec le parent et l'enfant, ainsi qu'avec le transfert de valeur entre le père et le fils.

Parent enfant :

1. Le composant enfant doit déclencher un événement personnalisé d'une manière ou d'une autre, comme une méthode d'événement de clic

2. Mettez la valeur à transmettre comme deuxième paramètre de $emit, et la valeur sera transmise comme paramètre réel à la méthode qui répond à l'événement personnalisé

3. Enregistrez-vous dans le composant parent Sous-composant et liez l'écouteur pour l'événement personnalisé sur la balise du sous-composant

Parent et enfant :

1. Le sous-composant crée un propriété dans props , utilisée pour recevoir la valeur transmise par le composant parent

2. Ajoutez l'attribut créé dans les accessoires du sous-composant à la balise du sous-composant et attribuez la valeur qui doit être transmise au sous-composant à l'attribut

Recommandations associées :

Explication détaillée de la communication du composant non parent-enfant du bus d'événements dans vue

Communication des composants Vue.js Analyse détaillée de plusieurs postures

Discussion approfondie des composants Vue.js et de la communication 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!