Vue多个子组件监听父组件事件 -

需要做一个标题吸顶的效果

在多个子组件中获取同一个父组件DOM, 监听scroll事件

text

<!-- child.vue循环多个 -->
mounted() {
  // this.taskListApp 父组件实例
  let dom = this.taskListApp.$refs['task-content_scroll']
  dom.onscroll = () => {
    console.log('scoll')
    this.handlerScroll()
  }
}

只在最后一个组件中执行了一次? 为什么? 想到应该跟Vue.jsz=注册事件相关, 就改成下面的写法

text

let dom = this.taskListApp.$refs['task-content_scroll']
dom.addEventListener('scroll', () => {
  this.handlerScroll()
})

完美, 触发的多次. 但是为什么呢? 去Vue,js文档看了一下注册事件相关的, 也没什么所以然. 又想到应该是事件注册方式的区边? 查了一下 addEventListener和on注册事件的区边?

addEventListener

它允许给一个事件注册多个 listener example:

text

<div class="box">ooxx</div>

text

window.onload = function(){
    var box = document.getElementById("box");
    box.onclick = function(){
        console.log("我是box1");
    }
    box.onclick = function(){
        box.style.fontSize = "18px";
        console.log("我是box2");
    }
}
// 运行结果：“我是box2”

第二个onclick把第一个onclick给覆盖了

text

window.onload = function(){
    var box = document.getElementById("box");
    box.addEventListener("click",function(){
        console.log("我是box1");
    })
    box.addEventListener("click",function(){
        console.log("我是box2");
    })
}
运行结果：我是box1 我是box2

addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。

参考链接

https://www.cnblogs.com/ontheway1215/p/6842274.html