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>
实现效果,页面共同控制一个组件增加数,一个组件控制减少数字