Rumah > Artikel > hujung hadapan web > 在vue中使用eventBus如何实现同级组件的通讯

在vue中使用eventBus如何实现同级组件的通讯

亚连asal: 2018-06-02 09:23:361810semak imbas

这篇文章主要介绍了vue 使用eventBus实现同级组件的通讯,需要的朋友可以参考下

新创建一个vue实例用于调度事件的绑定和发送

可以做到同级组件相互通讯，传递参数，点击第一个组件会修改第二个组件的label值，点击第二个组件会修改第二个组件的label值

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

上面是我整理给大家的，希望今后会对大家有帮助。

React组件项目（详细教程）

有关Vue组件开发技巧（详细教程）

通过代码示例，详解解读javascript模块加载器

Atas ialah kandungan terperinci 在vue中使用eventBus如何实现同级组件的通讯. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在vue2.0中如何实现自定义饼状图 (Echarts)组件Artikel seterusnya：在node.js中如何实现下载图片

Artikel berkaitan

Lihat lagi