标签：span listener his timeout inner 加载 import 接受 font
一个项目中存在很多这种情况：父组件（页面）中的子组件需要做下拉加载更多的需求，但是这个下拉到底部的动作只能通过监控页面（父组件）来完成
这就需要父子组件之间的通信，代码如下：
1. 建立一个用于父子组件通信的工具，bus.js
import Vue from ‘vue‘ let bus = new Vue() export default bus
2. 在父组件中监听页面的下拉，并用bus将下拉到底部时这个信号发给子组件，此处bus.js放在lib文件夹下，.container为页面最外层的class
import Bus from ‘@/lib/bus‘
methods: { scrollListener () { if (window.scrollTimer) clearTimeout(window.scrollTimer) window.scrollTimer = setTimeout(() => { let el = document.querySelector(‘.container‘) let innerDiv = document.querySelector(‘.container>div‘) if (el.scrollTop + window.innerHeight >= innerDiv.clientHeight) { // 发送拉到底部的信号给子组件 Bus.$emit(‘loadMore‘) } }, 250) }
mounted () { document.querySelector(‘.container‘).addEventListener(‘scroll‘, this.scrollListener) }
3. 在子组件中接受该信号，并调用加载数据的方法
created () { Bus.$off(‘loadMore‘) Bus.$on(‘loadMore‘, () => { // 在此调用加载更多数据的方法 }) }
关于Vue中页面(父组件)下拉，页面中的子组件加载更多数据的实现方法
标签：span listener his timeout inner 加载 import 接受 font
原文地址：https://www.cnblogs.com/jane2160/p/11395886.html
