Vue事件总线:this.$bus.$emit与this.$bus.$on_GIS数据共享

Vue事件总线:this.$bus.$emit与this.$bus.$on

2023-08-18 11:21:07  浏览:1726  作者:管理员
创建vue实例//main.js Vue.prototype.$bus = new Vue();发射事件//GoodsList this.$bus.$emit("aaa")监听事件//home.vue this.$bus.$on("aaa",()=>{ this.$refs.scroll.scr...

创建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());
  },


扫码查看

评论区

共 0 条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

【随机内容】

返回顶部