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

水深无声 2022-02-22 13:04 152阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

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

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

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

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

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

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

[https://cn.vuejs.org/v2/api/\#activated][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>

完结撒花

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220222/b15f35aabfd94224928ad42eaecdce69.png
[https_cn.vuejs.org_v2_api_activated]: https://cn.vuejs.org/v2/api/#activated

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery学习笔记12-绑定及解绑事件

、绑定事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...

港控/mmm°/ 2024年04月17日 18:40/ 0 赞/ 83 阅读

相关 vue事件绑定

@dblclick.native 绑定原生事件，可改成@dblclick.native="handle" 然后在methods中写handle方法 <templat

朴灿烈づ我的快乐病毒、/ 2023年07月13日 15:15/ 0 赞/ 24 阅读

相关 Vue 事件绑定

v-on指令用法： <button type="button" v-on:click ="num++">点击</button> v-on 可用@代替 @click

谁借莪１个温暖的怀抱￠/ 2023年03月12日 09:07/ 0 赞/ 37 阅读

相关事件绑定/解绑函数

事件绑定: 标准:元素.addEventListener(事件类型,事件处理函数,是否捕获); IE:元素.attachEventr(on+

雨点打透心脏的1/2处/ 2022年09月10日 04:21/ 0 赞/ 223 阅读

相关 vue 事件绑定

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

末蓝、/ 2022年05月31日 09:57/ 0 赞/ 329 阅读

相关 Vue——对全局事件的解绑

activated () \{ window.addEventListener('scroll', this.handleScroll) \},

我就是我/ 2022年04月13日 03:18/ 0 赞/ 429 阅读

相关 Vue学习笔记4.4 绑定原生事件

<!DOCTYPE html> <html> <head> <title>绑定原生组件</title> <script type="

痛定思痛。/ 2022年03月22日 20:38/ 0 赞/ 271 阅读

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

在上一节的教程中说道通过window.addEventListener来板顶scroll事件。这个表面上看起来是没啥问题。但其实是有问题的。因为他绑定的是window全局事

水深无声/ 2022年02月22日 13:04/ 0 赞/ 153 阅读

相关 vue项目笔记（27）-项目优化（解绑全局事件）

解绑全局事件在项目中，我们往往会遇到全局事件的绑定，但是可能只是某一个页面，如果不进行解绑，将会出现各种各样的bug，所以对全局事件进行解绑，很有必要。

r囧r小猫/ 2021年09月16日 03:34/ 0 赞/ 263 阅读

相关 Vue.js学习笔记：v-no绑定事件

v-on 指令用于监听DOM事件形式如：v-on:click 缩写为 @click  <a v-on:click="doSomething"

╰半橙微兮°/ 2021年09月14日 01:44/ 0 赞/ 341 阅读