Vue 组件间有5种常见的数据共享方式:
1:props $emit
2:依赖注入(provide inject )
3:处理边界(\$root,\$parent,\$refs)
4:eventbus
5:vuex
下面详细介绍eventbus方式的数据传递:
EventBus
优点:组件之间没有任何关系也能通过EventBus进行数据传递
缺点:数据不支持响应式
EventBus又称为事件总线。在Vue中可以使用 EventBus来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”。
如何使用EventBus
一、初始化
var eventbus = new Vue();
二、使用
eventbus.$emit("事件", "参数"); //派发事件
eventbus.$on('事件', function (msg) {//函数体}); //声明事件
<div id="app">
<button @click="handlerClick">send</button>
<compa></compa>
</div>
const compb = {
template: '<h2>compb</h2>',
mounted() {
eventbus.$on('compevent', function (msg) {
console.log(msg);
});
}
}
const compa = {
template:
`<div><compb></compb></div>
`,
components: {
compb
}
}
var vm = new Vue({
el: "#app",
components: {
compa
},
methods: {
handlerClick() {
eventbus.$emit("compevent", "hello world");
}
}
});
结果:
执行过程:点击button 触发handlerClick事件,在handlerClick中抛发事件,数据作为参数,定义事件的组件里触发事件接受参数。
参考文档:Vue文档