<template>
 <div class="scroll"></div>
</template>
 
<script>
 export default {
 name:'Scroll',
 methods:{
 scrollEvent(){
 if (document.documentElement.scrollTop
      + document.documentElement.clientHeight 
     >= document.body.scrollHeight) {
  this.onBottom();
 }
 }
 },
 props:{
 onBottom:Function
 },
 mounted(){
 window.addEventListener('scroll', this.scrollEvent,false);
 },
 destroyed () {
   window.removeEventListener('scroll', this.scrollEvent,false);
  }
 }
</script>

<template>
 <div class="wrap">
 <scroll :onBottom = "onBottom"></scroll>
 </div>
</template>
 
<script>
 import Scroll from '@/components/scroll'
 export default {
 name: 'roll',
 components:{
 Scroll,
 },
 methods:{
 onBottom(){
  console.log('bottom')
 }
 }
 }
</script>
<style type="text/css" lang="stylus" scoped>
 .wrap{
 height: 1000px;
 background: grey;
 width: 100%;
 }
</style>