Maison  >  Article  >  interface Web  >  Comment utiliser eventBus dans vue pour établir une communication entre les composants au même niveau

Comment utiliser eventBus dans vue pour établir une communication entre les composants au même niveau

亚连
亚连original
2018-06-02 09:23:361825parcourir

Cet article présente principalement l'utilisation d'eventBus par vue pour établir la communication entre les composants du même niveau. Les amis qui en ont besoin peuvent s'y référer

Créer une nouvelle instance de vue pour lier et envoyer des événements de planification

Les composants de même niveau peuvent communiquer entre eux et passer des paramètres. Cliquer sur le premier composant modifiera la valeur du label du deuxième composant, et cliquer sur le deuxième composant modifiera la valeur du label du deuxième composant

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="vue.js"></script>
</head>
<body>
<p id="app">
 <one></one>
 <two></two>
</p>
</body>
<script>
 // 使用一个vue实例 作为事件的载体,用于绑定事件和处理发送事件,作为调度中心
 let eventBus = new Vue()
 let one = {
  template: &#39;<p>{{val}} <button @click="click">click</button></p>&#39;,
  data() {
   return {
    val: 0
   }
  },
  created() {
   //为one绑定事件,如果two_click事件发生了,则执行回调函数
   eventBus.$on(&#39;two_click&#39;,
    (val) => {
     // 这个this 指的是one的vue实例
     this.val = val
    }
   )
  },
  methods: {
   click() {
    // 如果one被点击了,则发送一个one_click的事件,并传递一个参数
    eventBus.$emit(&#39;one_click&#39;, 11)
   }
  }
 }
 let two = {
  template: &#39;<p>{{val}} <button @click="click">click</button></p>&#39;,
  data() {
   return {
    val: 0
   }
  },
  created() {
   eventBus.$on(&#39;one_click&#39;,
    (val) => {
     this.val = val
    })
  },
  methods: {
   click() {
    eventBus.$emit(&#39;two_click&#39;, 22)
   }
  }
 }
 new Vue({
  el: &#39;#app&#39;,
  components: {
   one,
   two
  }
 })
</script>
</html>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile. l'avenir.

Articles connexes :

Projet de composant React (tutoriel détaillé)

À propos des compétences en développement de composants Vue (tutoriel détaillé)

Explication détaillée du chargeur de module JavaScript à travers des exemples de code

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn