Vue事件总线:this.$bus.$emit与this.$bus.$on
| 阅读时长: 1分钟
| 作者: GeoDev
| 浏览: 264
创建vue实例
//main.js
Vue.prototype.$bus = new Vue();
发射事件
//GoodsList
this.$bus.$emit("aaa")监听事件
//home.vue
this.$bus.$on("aaa",()=>{
this.$refs.scroll.scroll.refresh()
})示例:监听图片加载
//GoodsListItem.vue
<template>
<img :src="showImage"
alt=""
@load="imgLoad" />
</template>
imgLoad() {
if (this.$route.path.indexOf("/home") !== 1) {
this.$bus.$emit("homeImgLoad");
} else if (this.$route.path.indexOf("/detail") !== 1) {
this.$bus.$emit("detailImgLoad");
}
},//home.vue
mounted() {
const refresh = debounce(this.$refs.scroll.refresh, 50);
this.$bus.$on("homeImgLoad", () => {
refresh();
});
},//detail.vue
mounted() {
const refresh = debounce(this.$refs.scroll.refresh, 50);
this.$bus.$on("detailImgLoad", () => refresh());
},