vuejs组件通信的eventHub(巴士）

eventHub以我理解，他有点像vuex

eventHub是什么？

但是又是缩小版的，可以说是乞丐版，因为他所操作的东西并不多。

但是作为组件之间的通信已经足够了，因为你用vuex不得不引用vuex

而且你还需要做不少的配置，在大型或者中型项目处理起来十分方便。

但是一两个组件之间传递数据，或者组件比较少的情况下还要这样操作，需要一个备用方案。

 

eventHub如何使用？

1.如果你是外部js 引用的话，可以这样写

 

// event-bus.js
// 组件通过它来通信
var eventHub = new Vue()
export default eventHub


// 主页面

<template>
    <div>
        <button @click="find">发送</button>
    </div>

</template>
<script>
import Subscriber from './components/Subscriber'   //这里是假设的目录，需要自己定义
import eventHub from './js/event-bus'              //这里是假设的目录，需要自己定义  
export default {
   methods:{
        find(){
          eventHub.$emit('delete-todo', 'hello')
            // 第一个参数是信号的名称
            // 第二个参数是发送的参数
        }
    }
}
</script>





// 组件1  
// components名称：Subscriber 

<template>
        


</template>

<script>
  export default {
    created(){
       eventHub.$on('delete-todo',backing )
        // 这里是接收信号
       // 第一个参数是信号名称
       // 第二个参数是回调的函数名称
    },
     methods:{
        backing(site){
         console.log(site)
        }
    }
}

</script>



// 点击按钮「发送」 后
// 打印： hello

这里是把他独立成一个js 引用，如果不想每次用的时候都在组件里面定义应该怎么做呢？

 

1.在入口文件里面引用

 

假设你用的是脚手架工具，引用文件名叫 main.js

import Vue from 'vue'
import App from './App'


//  全局组件之间通信
Vue.prototype.$eventHub= Vue.prototype.$eventHub ||  new Vue()        // 巴士

new Vue({
  el: '#app',
  template: '<App/>',
  components: {App},
  data: {
    eventHub: new Vue()
  }
})

组件部分：

主页面： HelloWorld.vue

<template>
  <div class="hello">
    <h1 @click="go">传递</h1>
    <back></back>
  </div>
</template>

<script>
import back from "@/components/Background";
export default {
  name: "HelloWorld",
  methods: {
    go() {
      this.$eventHub.$emit("add-todo", "哈哈");
    }
  },
  components: {
    back
  }
};
</script>

 

引用组件：

<template>
    <div>
        <div>background</div>
        <div class="">
            <button @click="move">发送bb</button>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      bb: "我是订阅者"
    };
  },
  created() {
    this.$eventHub.$on("add-todo", this.move);
    // 绑定接收回调过来的事件处理 
  },
  methods: {
    move(ab) {
      console.log("发送");
      console.log(ab);
      console.log("我获取到参数");
    }
  }
};
</script>

<style>
</style>

 

最终打印：

发送
哈哈
我获取的参数