Comment implémenter la communication dans vue2.0 ?-js tutoriel-php.cn

Comment implémenter la communication dans vue2.0 ?

亚连

Libérer： 2018-06-11 17:39:33

original

1674 Les gens l'ont consulté

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 &#39;Vue&#39;
export default new Vue;

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

3. Effets