一、事件总线
1、简介
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
2、如何使用EventBus
1、初始化
首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。
- 方式一：新创建一个 .js文件，比如 event-bus.js 需要做的只是引入 Vue 并导出它的一个实例（在这种情况下，我称它为 EventBus ）。实质上它是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
- 方式二：可以直接在项目中的 main.js 初始化 EventBus
这种方式初始化的 EventBus 是一个 全局的事件总线
// main.js
Vue.prototype.$EventBus = new Vue()
// 使用时为：
this.$bus.$emit('nameOfEvent',{
... pass some event data ...});
2、发送事件
EventBus.$emit(channel: string, callback(payload1,…))
EventBus.$emit("decreased", {
num:this.num,deg:this.deg});
3、接收事件
EventBus.$on(channel: string, callback(payload1,…))
只监听一次：EventBus.$once(channel: string, callback(payload1,…))
data() {
return {
degValue:0,
fontCount:0,
backCount:0
};
},
mounted() {
EventBus.$on("decreased", ({
num,deg}) => {
this.fontCount -= num
this.$nextTick(()=>{
this.backCount -= num
this.degValue -= deg;
})
});
}
4、移除事件监听者
EventBus.$off(‘decreased’,{})
可以使用 EventBus.$off(‘decreased’) 来移除应用内所有对此事件的监听。或者直接调用EventBus.$off() 来移除所有事件频道， 注意不需要添加任何参数 。
二、$nextTick方法
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
用来解决异步问题，比如当swiper中的轮播图初始化与请求同时进行时：应把轮播图的渲染写到请求成功后的执行语句中，且要利用$nextTick方法。
// 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
this.$nextTick(() => {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})