事件总线(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>