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>

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