【Vue项目复习笔记】详情页--首页和详情页监听全局事件和mixin的使用

因为我们直接将GoodsListItem应用在我们的详情页，但是GoodsListItem我们通过imageLoad发送出一个$bus的事件

imageLoad() {
      this.$bus.$emit('itemImageLoad')
    },
1
2
3

在Home.vue对这个事件做了一个监听。
但是此时我们在详情页里面通过GoodsListItem做一个加载，也就是我在详情页做了一个加载，但是却通知了home做一个刷新，这样必然是不合理的。也就是我们的详情页做了加载以后不必通知Home，一方面我们可以通过路由做一个判断

imageLoad() {
     if(this.$route.path.indexOf('/home')){
      this.$bus.$emit('itemImageLoad')
      }
    }
1
2
3
4
5

但是在我们详情页里面我本身也要也要监听事件，等图片加载完以后，本身也要做一次刷新，也就是说详情页也会监听item，并且发送事件，所以通过路由也能完成

imageLoad() {
     if(this.$route.path.indexOf('/home')){
      this.$bus.$emit('homeItemImageLoad')
          }else if(this.$route.path.indexOf('/detail')){
      this.$bus.$emit('detailItemImageLoad')
          }
     }
1
2
3
4
5
6
7

还有另外一个思路：不管是在详情还是首页都发送的是itemImageLoad事件

imageLoad() {
      this.$bus.$emit('itemImageLoad')
    },
1
2
3

因为一旦进入详情页，首页里面一定不需要再监听这个事件。
在首页里面一旦发现我离开的时候就把这个事件取消掉。
在我们的首页组件中有一个deactivated()

deactivated() {
    //保存Y值
    this.saveY = this.$refs.scroll.getscrollY()

    // 取消全局事件的监听
    this.$bus.$off('itemImageLoad',函数)
  },
1
2
3
4
5
6
7

这个this. $ bus.$ off并不能只传一个事件，如果直传这一个事件就意味着关于itemImageLoad这个事件的监听就都会被取消掉，所以需要告诉需要取消的函数。所以需要传入一个函数，监听的函数。而这个函数在mouted里面

  this.$bus.$on('itImageLoad',()=>{
      refresh()
    })
1
2
3

也就是要把refresh()这个函数取消掉。
我们先要把这个函数抽取出来
在data()里新建变量

 itemImageListener:null
1

然后在mouted里面做一个保存

 //对监听的事件进行保存
    this.itemImageListener=()=>{
      refresh()
    }
    this.$bus.$on('itImageLoad',this.itemImageListener)
1
2
3
4
5

然后就可以在

deactivated() {
    //保存Y值
    this.saveY = this.$refs.scroll.getscrollY()

    // 取消全局事件的监听
    this.$bus.$off('itemImageLoad',this.itemImageListener)
  },
1
2
3
4
5
6
7

将我们这个函数取消掉。
如果想在详情页也想监听这个事件的话，也可以在对应是mouted（）里面

his.$bus.$on('itImageLoad'，()=>{

         })
1
2
3

此时上面的箭头函数里面执行的也是刷新，我们最好也对它加一个防抖，在Detail.vue中导入debouce

  mounted() {
    const refresh=debounce(this.$refs.scroll.refresh,500)
    this.$bus.$on('itImageLoad',  ()=>{
              refresh()
    })
  }
1
2
3
4
5
6

this.$refs.scroll.refresh，所以我们需要对scroll标签拿一个ref.
而我们的这个 refresh()也得在某个时候把它取消掉，所以也需要对其进行保存，
在Detail.vue中的data()里面增加一个变量

 itemImageListener:null
1

在mouted(）里面

  this.itemImageListener=()=>{
      refresh()
    }
    this.$bus.$on('itImageLoad',this.itemImageListener)
1
2
3
4

然后在离开的时候也得取消掉

  destroyed() {
    this.$bus.$off('itemImageLoad',this.itemImageListener)
  }
1
2
3

之所以没有用deactivated，是因为activated和deactivated这两个函数都是在有缓存的情况下keep-alive里面调用的，但是我们的deactivated他是排除在keep-alive之外的，所以我们需要在destoryed里面取消。

但是你会发现我们上面两段操作都基本上都一样，我们在开发的时候避免使用重复代码。我们就需要对上面一些代码做一个抽取

在common里面新建mixin.js

export const itemListenerMixin={
  data() {
    return {
      itemImageListener: null
    }
  },
  mounted() {

    const refresh=debounce(this.$refs.scroll.refresh,500)
    //对监听的事件进行保存
    this.itemImageListener=()=>{
      refresh()
    }
    this.$bus.$on('itImageLoad',this.itemImageListener)
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

然后将其导入到Detail，Home中，接下来

 mixins:[itemListenerMixin],
1

它属于单独一部分，和data()平级
然后再把mouted(){}里面的内容置空
其中这个混入不仅可以提取变量，函数，很多东西都能提取，components也可以提取，甚至methods也可以提取