book界面分页处理

思路：在父组件LibraryIndex中编写handleCurrentPage分页事件，由于分页组件放在子组件bookarea中，这个事件实际上是关联的子组件的分页事件，在子组件中bookarea自动加载全部书本信息页面，而在父组件中则处理了分类查询的书本信息页面，这两类书本信息显示在同一个区域内。所以需要使用cid判断是全部书本还是分类查询书本，两种情况分别处理分页事件。

1、在两个组件data里都添加cid，book中cid默认为0，即全部书本信息。

2、通过父子组件之间通信传递pageNum。

3、父组件通过不同cid处理分页事件。

 

子（book.vue）给父传递(LibraryIndex.vue)pageNum：

handleCurrentChange: function (pageNum) {
        this.pageNum = pageNum
        let _pageNum={
          Page:pageNum
        }
        this.$emit('handlePage',_pageNum)

        console.log(this.pageNum)
      }

LibraryIndex.vue根据关联的分页数据处理分页事件：

handleCurrentPage:function(_pageNum){
        this.$refs.booksArea.cid = this.cid
        this.$refs.booksArea.pageNum = _pageNum.Page
        this.pageNum = _pageNum.Page
        console.log("cid:"+this.$refs.booksArea.cid)
         if(this.$refs.booksArea.cid === 0)
        { 
          this.$refs.booksArea.loadBooks()
          this.pageNum = 1
        }
        else{
          console.log("分类查询分页")
             this.listByCategory()
             this.pageNum = 1
        }
       
      }

book默认页面（全部书本）分页：

 

 点击分类查询分页：

 

 

附：父子组件的关联和数据通信