自己一个人做网站可以吗/哪些平台可以免费推广

一个项目中存在很多这种情况：父组件（页面）中的子组件需要做下拉加载更多的需求，但是这个下拉到底部的动作只能通过监控页面（父组件）来完成

这就需要父子组件之间的通信，代码如下：

 

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', () => {// 在此调用加载更多数据的方法
    })}