eventBus传递消息

对于一些中小项目而言,可以不使用vuex这种消息调控中枢,使用eventBus方式就好了

eventBus通过在要相互通信的组件之中,引入一个新的vue实例,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

新建一个bus.js

import Vue from 'vue';
export default new Vue();

要通信的两个组件分别是A和B,分别引入eventBus

<template>
<div>
    <el-button @click="sendMessage">点我传递消息</el-button>
</div>
</template>

<script>
import eventBus from './../utils/bus.js';  //引入eventBus
export default {
    methods:{
        sendMessage(){
            eventBus.$emit('changeText','改变了');
        }
    }
}
</script>
<style lang='less' scoped>
</style>
<template>
<div>
    {{text}}
</div>
</template>
<script>
import eventBus from './../utils/bus.js';   //引入eventBus
export default {
    data(){
        return {
            text:'等待中......'
        }
    },
    created(){
        eventBus.$on('changeText',(text)=>{
            this.text = text;
        });
    }
}
</script>
<style lang='less' scoped>
</style>

通过eventBus.$emit触发并通过eventBus.$on响应,很容易就实现了组件消息传递

也可以在main.js里面全局挂载eventBus,这样就不用一个个引入了

//bus.js
import Vue from 'vue';
const eventBus = new Vue();
export { eventBus }
//main.js
import {eventBus} from './utils/bus.js'
Vue.prototype.eventBus = eventBus
this.eventBus.$emit();
this.eventBus.$on();