2021-02-21

eventbus的使用

在vue项目中，如果项目不是很大，在兄弟组件通讯时候可以不用vuex，这个时候eventbus是个不错的选择，需要在组件之外定义一个js文件来作为组件间通讯的桥梁，js内容如下，创建一个vue实例

import Vue from 'vue'
export default new Vue

然后在需要通讯的组件中引入js文件

import eventbus from "../eventbus.js";

举个例子就是在一个组件中通过自定义事件传递信息挂载数据，然后在另一个组件中获取数据

    geteventbus() {
      eventbus.$emit("fun", ‘你好啊’);
    },
    getevent(val) {
      console.log(val);
    },

另一个组件监听数据，做处理

  mounted() {
    eventbus.$on("fun", this.getBus
    );
  },

当然如果我们不想单独写eventbus的js文件，我们可以将eventbus挂载到vue原型上，直接用this来点出eventbus
在main.js中我们这样写：

Vue.prototype.$eventbus=new Vue()

然后我们在调用时候可以直接用

  mounted() {
    this.$eventbus.$on("fun", this.getBus
    );
  },