美文网首页
Vue中全局事件的解绑

Vue中全局事件的解绑

作者: 泡杯感冒灵 | 来源:发表于2020-08-15 07:46 被阅读0次

当我们写Vue项目的时候,大部分时候,我们绑定事件都是在具体的组件上通过@去绑定的例如

<div @click="handleClick">
  点击事件
</div>

这样的写法,事件只会在具体元素被点击的时候才会被触发,不会影响其他的组件
但是有时候,我们绑定事件并不是在具体的元素或组件上,而是在全局对象上。例如:

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

这个时候,其他页面的滚动也会触发这个scroll事件,因此,为了避免影响其他页面,我们有必要对这个绑定的全局事件进行解绑
当我们对组件使用keep-alive的之后,组件会多出一个activated生命周期函数,它在每次页面展示的时候会执行,对应的,它还提供了一个新的生命周期函数,是 deactivated
deactivated 是页面即将被隐藏或者页面即将被替换成新的页面的时候,就会执行

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

相关文章

  • vue中解绑全局事件

    在vue中,写在methods里面的方法,在页面切换时一般就自动销毁了,但是写在window上的事件,需要我们手动...

  • Vue中全局事件的解绑

    当我们写Vue项目的时候,大部分时候,我们绑定事件都是在具体的组件上通过@去绑定的例如 这样的写法,事件只会在具体...

  • 全局事件的解绑

    如果不进行解绑,那么就会在所有页面生效这个事件。因为他是绑定在window对象上的,所以相当于全局事件

  • vue中移除事件、解绑事件

    点击事件示例: @click = 'isBtn && myBtn()' 执行过程会优先判断 isBtn 是否为 t...

  • 对全局事件的解绑

    问题的产生:在详情页面,我们对拖动页面绑定了scroll事件,实现对header区域的渐隐渐现效果,如图1。不过这...

  • 【Vue23】对全局事件的解绑

    这块内容很重要!!!很多初学者因为没有对全局事件及时解绑,造成代码大量的bug,【其实在看这里之前,我也不会记得对...

  • JS基础学习:为元素解绑事件

    解绑事件 用什么方式绑定事件,就应该用对应的方式解绑事件。有三种方式 1.解绑事件对象.on事件名字=事件处理函数...

  • jQuery篇之操作jQuery对象(事件)

    事件对象e 绑定、解绑 on 解绑 手动触发(自定义事件) trigger triggerHandler clic...

  • 事件解绑

    用什么方式绑定事件就应该用什么方式解绑事件 解绑事件: 对象.on事件名字=事件处理函数--->绑定事件对象.on...

  • 事件解绑

网友评论

      本文标题:Vue中全局事件的解绑

      本文链接:https://www.haomeiwen.com/subject/jtwlbctx.html