Comment implémenter la communication dans vue2.0 ?

Cet article présente principalement le code d'implémentation de la communication du composant frère vue2.0 (niveau homologue). Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

1, Préliminaires

Jetons un coup d'œil aux deux premiers articles :

Le composant parent est transmis au composant enfant

Le sous-composant est transmis au parent composant

Regarde la photo, regarde la photo, regarde la photo ! ! !

Compréhension personnelle :

C'est évidemment comme si le frère cadet appelait le frère aîné dans la vie. Les deux parties ont besoin de téléphones portables et de tours de transmission de signaux.

• Brother=> Composant A

• Brother=>Composant B

• Brother's Mobile phone=> $emit envoie des données

• Téléphone portable du frère=> $on surveille et reçoit des données

• Tour de transmission du signal=> Ligne d'événement intermédiaire

• App.vue => Inutile de dire que tout le monde sait que c'est la terre

2 .Code

2.1. Créez une nouvelle ligne d'événement intermédiaire ligature.js sous src/asstes (notez le suffixe .js)

import Vue from 'Vue'
export default new Vue;

2.2. A.vue sous src/components

<template>
 <p>
 <h2>A组件</h2>
 <button v-on:click="spot">点一下就传</button>
 </p>
</template>
<script>
 import bus from &#39;../assets/ligature&#39;;
 export default {
 methods: {
 spot: function() {
 //监听A组件中的spot，并发送数据
 bus.$emit("spot", &#39; 没想到吧！！我是A组件&#39;)
 }
 }
 }
</script>

2.3. Créez un nouveau B.vue dans src/components

<template>
 <p>
 <h2>B组件</h2>
 <p>结果:{{msg}}</p>
 </p>
</template>
<script>
 import bus from "../assets/ligature";
 export default {
 data() {
 return {
 msg: "这TMD是默认值除非你点一下上面的按钮"
 };
 },
 mounted() {
 var _this = this;
 //监听A组件中的spot，并接受数据
 bus.$on("spot", function(msg) {
 _this.msg = msg;
 });
 }
 };
</script>
<style>
p{
 font-size: 20px;
 color: darkcyan;
}
</style>

2.4. Modifiez App.vue (Terre), enregistrez ces deux composants. , et ajoutez ces deux composants Balises

<template>
 <p id="app">
 <A/>
 <hr>
 <B/>
 </p>
</template>
<script>
import A from &#39;./components/A&#39;
import B from &#39;./components/B&#39;
export default {
 name: &#39;App&#39;,
 components: {
 A,
 B
 }
}
</script>

3. Effets

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile pour. tout le monde dans le futur.

Articles associés :

Comment désactiver la fonction de mise en cache des propriétés calculées de Vue ? Quelles sont les étapes spécifiques ?

Comment résoudre le problème selon lequel la valeur sélectionnée ne change pas après avoir modifié l'attribut calculé dans vue. L'opération spécifique est la suivante

Comment résoudre l'option de liste déroulante de sélection du problème de dislocation iview, les opérations spécifiques sont les suivantes

Comment implémenter la liste déroulante de sélection via Vue.js, les opérations spécifiques sont les suivants

Détails sur l'optimisation des performances des composants React Expliquez

Comment utiliser vue pour recadrer des images tout en agrandissant, réduisant et faisant pivoter les fonctions ( tutoriel détaillé)

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!