So verwenden Sie EventBus in Vue, um eine Kommunikation zwischen Komponenten auf derselben Ebene zu erreichen-js-Tutorial-php.cn

So verwenden Sie EventBus in Vue, um eine Kommunikation zwischen Komponenten auf derselben Ebene zu erreichen

亚连

Freigeben： 2018-06-02 09:23:36

Original

1832 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von EventBus durch Vue vorgestellt, um die Kommunikation zwischen Komponenten auf derselben Ebene zu erreichen. Freunde, die es benötigen, können darauf verweisen

Erstellen Sie eine neue Vue-Instanz zum Binden und Senden von Planungsereignissen

Komponenten auf derselben Ebene können miteinander kommunizieren und Parameter übergeben. Durch Klicken auf die erste Komponente wird der Beschriftungswert der zweiten Komponente geändert, und durch Klicken auf die zweite Komponente wird der Beschriftungswert der zweiten Komponente geändert

<!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>

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

React-Komponentenprojekt (ausführliches Tutorial)

Über Vue-Komponentenentwicklungsfähigkeiten (ausführliches Tutorial)

Detaillierte Erläuterung des JavaScript-Modulladers anhand von Codebeispielen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie EventBus in Vue, um eine Kommunikation zwischen Komponenten auf derselben Ebene zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!