vue子组件监听scroll事件

Posted 2023-04-27

参考技术A 随着三大框架(vue,react,angular)的流行,导致前端开发者越来越少的接触dom操作,慢慢忘了有些需求dom才是最优解.

需求:子组件滚动时执行对应函数

如果直接在子组件mounted里addEventListener,
只能监听到父组件的滚动,子组件监听不到

解决方案
查看addEventListener的文档得知:
1. 子组件mounted里addEventListener的时候,第三参数要设置为true,因为子组件滚动是捕获事件,父组件滚动是冒泡事件,addEventListener第三参数默认false只监听冒泡事件,所以子组件的捕获事件默认监听不到,改为true才可以.

2.这时候子组件和父组件的滚动都能触发事件,区别前者是捕获后者是冒泡,通过查阅event的文档得知,冒泡事件event.bubbles值是true,捕获事件的值是false.所以通过addEventListener的回调函数判断event的bubbles值即可区分是父组件滚动还是子组件滚动.

回调函数:

3.记得销毁组件的时候移除监听事件

vue2.x 父组件监听子组件事件并传回信息

利用vm.$emit

1、在父组件中引用子组件

<child  @from-child-msg="listenChildMsg"></child >

2、子组件中使用$emit发送事件

this.$emit(‘from-child-msg‘, ‘这是子组件传递的消息‘);