1. 问题场景

三列布局中，如果想要将主要内容main优先加载优化，则DOM如下所示

1
2
3
4
5

<div class="g-container">
　　<div class="g-main">我是主列</div>
　　<div class="g-left">我是左列</div>
    <div class="g-right">我是右列</div>
</div>

所谓事件总线，就是实例化Vue对象，在该实例上通过$on绑定事件、$emit触发事件、$off解绑事件，进行组件通信。

一、使用

实例化Vue对象，并挂载到Vue.prototype

1

Vue.prototype.$bus = new Vue();

二、场景

在多个页面复用一个组件时，每个页面需要有点击按钮后，触发不同的事件

当然可以监听路由进行判断调用不同的函数，但是这样会在一个组件内写上很多其他组件应该触发的事件。

我们利用EventBus可以做到组件间的解耦

三、使用方法

1.我们在各个页面上写好事件触发后调用的函数，然后在mounted（如果用keep-alive则是在activated，否则只挂载一次）this.$bus.$on上绑定该事件，在beforeDestory（如果用keep-alive则是在deactived，否则无法解绑事件）上用this.$bus.$off解绑事件。

1
2
3
4
5
6
7
8
9
10
11

mounted() {
    this.$bus.$on("save", this.save);
}

beforeDestory() {
    this.$bus.$off("save", this.save);
}

save() {
    console.log("我没有写在复用组件上哦！")
}

2.然后在复用的组件上触发事件

1

this.$bus.$emit('save');

也算是第一次尝试使用EventBus把，很好的降低了组件间的耦合度

在做项目的时候看到了这个需求，需要用图片替换默认的文字显示