<template> <div> <template v-if="count"> <ul> <li v-for="item in items">...</li> </ul> <mo-paging :page-index="currentPage" :totla="count" :page-size="pageSize" @change="pageChange"> </mo-paging> </template> </div> </template> <script> import MoPaging from './paging' export default { //显示的声明组件 components : { MoPaging }, data () { return { pageSize : 20 , //每页显示20条数据 currentPage : 1, //当前页码 count : 0, //总记录数 items : [] } }, methods : { //获取数据 getList () { //模拟 let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}` this.$http.get(url) .then(({body}) => { //子组件监听到count变化会自动更新DOM this.count = body.count this.items = body.list }) }, //从page组件传递过来的当前page pageChange (page) { this.currentPage = page this.getList() } }, mounted() { //请求第一页数据 this.getList() } } </script>
VUE实现一个分页组件的示例(2)
内容版权声明:除非注明,否则皆为本站原创文章。