Vue2.5学习笔记 9.4 全局事件解绑定

在上一节的教程中说道通过window.addEventListener来板顶scroll事件。

这个表面上看起来是没啥问题。但其实是有问题的。因为他绑定的是window全局事件。也就是说不仅仅在当且页面会触发，在别的页面也有可能触发比如说这事件在页面滑动的时候输出scroll。在当前页面是这么输出。返回到首页后，然后会在输出

所以要做全局事件的解绑定。

添加一下生命周期函数即可：

  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }

这里刚好说下，在上节笔记中我有写到

activated()无法使用。嗯，这个deactivated()也无法使用。刚才脑子灵光了一下，我特么干嘛不去看官方文档。

然后就找到如下的说明了：

https://cn.vuejs.org/v2/api/#activated

意思是需要一个 <keep-alive>标签才能够调用这两个生命周期函数

这个keep-alive的具体说明看我上面发的那个网址就可以了。

我研究了一下只需要将<detail-header></detail-header>包裹起来就好了

// Detail.vue

<template>
  <div>
    <detail-banner></detail-banner>
    <keep-alive>
      <detail-header></detail-header>
    </keep-alive>
    <div class="content"></div>
  </div>
</template>

完结撒花

Vue2.5学习笔记 9.4 全局事件解绑定

相关推荐