Vue.js 2.x中事件总线(EvevntBus)及element-ui中全屏loading的使用

　　事件总线(Event Bus)可以在vue项目的index.js文件中创建，也可以在一个独立的.vue文件中创建。使用时，在各个子组件中引入该组件即可。

　　项目中的全屏loading较多时，可以在根组件App.vue中添加一个loading，再结合Event Bus，即可在子组件中唤起该loading。

　　代码如下：

//EventBus.vue
<template>
</template>
<script>
  import Vue from "vue";
  // 模块类事件总线    vuex的补充， 有些场景下vuex用起来 很复杂
  export default new Vue({
    name: 'EventBus',
    data () {
        return {
            // code
        }
    }
})
</script>

　　

//App.vue  vue项目根组件
<template>
    <!-- 在顶级渲染出口外添加loading及loading文字 -->
    <div v-loading="loadingBox" :element-loading-text="loadingName">
        <router-view >
        </router-view>
    </div>
</template>
<script>
import eventScope from "./EventBus";  //引入EventBus
export default {
    name: 'AppView',
    data: function() {
        return {
            loadingBox: false,//控制loading显隐
            loadingName:""//loading时显示的文字
        }
    },
    mounted: function() {
　　　　　//组件加载后即开始监控loading
        eventScope.$on("loading", (l, name='拼命处理中...')=>{
            this.loadingBox = l;
            this.loadingName = name
        })
    },
}
</script>

　　

//child.vue
<template>
    <!-- code... -->
</template>

<script>
import eventScope from "./EventBus";//引入事件总线(EventBus)
export default {
    name: 'detail',
    data: function () {
        return { }
    },
    computed: {},
    props: { },
    methods: {
        searchEnterFunc() {
            // code..
            // 请求前打开loading
            eventScope.$emit("loading", true);
            api.get(url, {
                U_PurchaseNum: this.data.details.DocNum2
            }).then(res => {
                // code...
                // 请求成功后关闭loading
                eventScope.$emit("loading", false);
            }).catch(err => {
                // 请求失败后关闭loading
            })
        }
    },
    components: {},
    mounted: function () {}
}
</script>