vue中event bus的简单使用 使用详细介绍

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。事件总线应用于同一路由传值

 

demo示例：

一、初始化
首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，新创建一个 .js 文件，比如 event-bus.js

event-bus.js:

import Vue from 'vue'
export const EventBus = new Vue()

实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。

demo00.vue:

<template>
  <div>
    <h1>demo00</h1>
    <d1></d1>
    <d2></d2>
  </div>
</template>
<script>
  import {
    EventBus
  } from "./event-bus.js";
  import  d1 from "./demo02"
  import  d2 from "./demo01"
  export default {
    components:{
      d1,
      d2
    },
    data(){
      return {
      }
    },
    mounted() {
    }
  };
</script>

demo01

<template>
  <div>
    <p>{{count01}}</p>
    <button @click="sendMsg()">-</button>
  </div>

</template>

<script>
  import {
    EventBus
  } from "./event-bus.js";
  export default {
    name:'demoo01',
    data(){
      return {
        msg: '',
        count01: 0,
      }
    },
    mounted() {
      EventBus.$on("aMsg01", (count) => {
        // A发送来的消息
        this.count01 = count;
      });
    },
    methods: {
      sendMsg() {
        this.count01-=1;
        EventBus.$emit("aMsg02", this.count01);
      }
    }
  };
</script>

demo02

<template>
  <button @click="sendMsg()">+</button>
</template>

<script>
  import { EventBus } from "./event-bus.js";
  export default {
    name:'demoo1',
    data(){
      return {
        count:0,
      }
    },
    methods: {
      sendMsg() {
        this.count++;
        EventBus.$emit("aMsg01", this.count);
      }
    },mounted() {
      EventBus.$on("aMsg02", (count) => {
        // A发送来的消息
        this.count01 = count;
      });
    },
  };
</script>

实现效果，页面共同控制一个组件增加数，一个组件控制减少数字