關於Vue中頁面(父組件)下拉，頁面中的子組件加載更多數據的實現方法

一個項目中存在很多這種情況：父組件（頁面）中的子組件需要做下拉加載更多的需求，但是這個下拉到底部的動作只能通過監控頁面（父組件）來完成

這就需要父子組件之間的通信，代碼如下：

 

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', () => {
      // 在此調用加載更多數據的方法
    })
  }