WRM
0%

组件复用的bug

发表于 分类于 ，

bug：当组件被多个页面复用时，组件被触发时传递的事件可能会传递到多个页面。然而并非所有的页面都需要接收这个事件
解决办法（两种）：

  1. 判断路由：在组件触发事件往外传递之前先判断当前路由：
1
2
3
4
5
6
7
imageLoad() {
  if (this.$route.path.indexOf("/home") !=-1) {
    this.$bus.$emit("itemImageLoad");
  } else if (this.$route.path.indexOf("/detail") !=-1) {
    this.$bus.$emit("detailItemImgLoad");
  }
},
  1. 对监听的事件进行保存，当离开页面时，取消对应的对全局事件的监听
1
2
3
4
5
6
7
8
9
10
mounted() {
  // 监听GoodsItem中的图片是否加载完成
  const refresh = debounce(this.$refs.scroll.refresh, 200);

  // 对监听的事件进行保存
  this.itemImgLoad = () => {
    refresh();
  };
  this.$bus.$on("itemImageLoad", this.itemImgLoad);
},
1
2
3
4
deactivated() {
  // 在离开页面前,取消全局事件的监听
  this.$bus.$off("itemImageLoad", this.itemImgLoad);
},

注意：如果使用的组件没有缓存（keep-alive）是无法调用deactivated()的，可以用destroyed()代替