vue页面父组件滚动触底，子组件触发事件

vue页面父组件滚动触底，子组件触发事件

父组件中监听滚动：

methods : {
watchScroll : function () {} {
let that = this
let clientHeight = document.documentElement.clientHeight || document.body.clientHegiht; //页面高度
let divObj = document.getElementById('#container')
// let divObj = $('#container')[0]
let oTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop; //滚动条已经滚动的高度(被卷曲的高度)
let scrollHeight = divObj.scrollHeight //滚动条总高度
if(oTop + clientHeight >= scrollHeight){//触底
//改变变量并传给子组件
//that.getMore = true
}
}
}
mounted : {
window.addEventListener('scroll',this.watchScroll,true);
}
destroyed : {
window.removeEventListener('scroll',this.watchScroll);
}

子组件接收变量后watch数据变化:

Vue.component('son', {
props: ['getMore'],
data: function () {
return {
more: ''
}
},
watch : {
getMore() {
this.more = this.getMore
console.log('触底了！！')
}
}
}