一、组件之间的层级关系如下图:
现要在test_page_1.vue 组件中改变,MyHeader.vue组件中的某个属性值。
二、eventBus简介:
EventBus
又称为事件总线。在Vue中可以使用 EventBus
来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。
EventBus
可以较好的实现兄弟组件之间的数据通讯。
三、使用eventBus解决问题
1、初始化
创建eventbus.js文件
import Vue from 'vue'
// 解决多组件传值问题
export const globalBus = new Vue();
2、在test_page_1.vue 组件中添加发送事件
<script>
import { globalBus } from '../../eventBus';
export default {
name: 'TestPage1',
data(){
return {
input: ''
}
},
methods: {
change(){
globalBus.$emit("change-welcome",this.input);
console.log(this.input);
}
}
}
</script>
3、在MyHeader.vue中添加接收事件
<script>
import { globalBus } from '../eventBus';
export default {
name: 'MyHeader',
data() {}
},
methods : {
...
},
mounted: function(){
globalBus.$on("change-welcome",welcomeMsg =>{
this.welcomeMsg = welcomeMsg;
});
}
}
</script>
四、eventBus可能会导致的问题
前面提到过,如果使用不善,EventBus
会是一种灾难,到底是什么样的“灾难”
了?大家都知道vue是单页应用,如果你在某一个页面刷新了之后,与之相关的EventBus
会被移除,这样就导致业务走不下去。还要就是如果业务有反复操作的页面,EventBus
在监听的时候就会触发很多次,也是一个非常大的隐患。这时候我们就需要好好处理EventBus
在项目中的关系。通常会用到,在vue页面销毁时,同时移除EventBus
事件监听。
移除eventBus事件监听
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})
你也可以使用 EventBus.$off('aMsg')
来移除应用内所有对此某个事件的监听。或者直接调用 EventBus.$off()
来移除所有事件频道,不需要添加任何参数 。
上面就是 EventBus
的使用方法,是不是很简单。上面的示例中我们也看到了,每次使用 EventBus
时都需要在各组件中引入 event-bus.js
。事实上,我们还可以通过别的方式,让事情变得简单一些。那就是创建一个全局的 EventBus
。接下来的示例向大家演示如何在Vue项目中创建一个全局的 EventBus
。
五、介绍全局eventbus的使用
它的工作原理是发布/订阅方法,通常称为 Pub/Sub
。
1、创建全局eventbus
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
可以直接在项目中的 main.js
初始化 EventBus
:
// main.js
Vue.prototype.$EventBus = new Vue()
在这个特定的总线中使用两个方法$on
和$emit
。一个用于创建发出的事件,它就是$emit
;另一个用于订阅$on
:
var EventBus = new Vue();
this.$bus.$emit('nameOfEvent', { ... pass some event data ...});
this.$bus.$on('nameOfEvent',($event) => {
// ...
})
然后我们可以在某个Vue页面使用this.$bus.$emit("sendMsg", '我是web秀');
,另一个Vue页面使用
this.$bus.$on('updateMessage', function(value) {
console.log(value);
})
同时也可以使用this.$bus.$off('sendMsg')
来移除事件监听。