如何将分页创建为可在 VueJS 中重用的子组件答案

【问题标题】：How to create pagination as child component that reusable in VueJS如何将分页创建为可在 VueJS 中重用的子组件
【发布时间】：2023-04-07 21:37:02
【问题描述】：

目前我正在使用 Element-UI 在我的应用程序中进行快速开发，我想将分页创建为子组件，因此我可以在任何父组件中重复使用它并减小我的应用程序的大小。

具有“内联”分页的父组件示例。

parent.vue

<template>
    <ol>
        <li v-for="student in studentList>{{ student.full_name }}</li>
    </ol>
    <el-pagination
        layout="sizes, prev, pager, next"
        :total="totalPages"
        :page-size="pageSize"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
</template>
<script>
    export default {
        data () {
            return {
                pageSize: 10,
                currentPage: 1,
                students: [] // this filled from backend when component created
            }
        },
        created () {
            // Axios HTTP request to fetch data from server
            // to filled students variable
        },
        computed: {
            totalPages () {
                return this.students.length
            },
            studentList () {
                return this.students.slice(((this.currentPage - 1) * this.pageSize), (this.pageSize * this.currentPage))
            }
        },
        methods: {
            handleSizeChange (size) {
                this.pageSize = size
            },
            handleCurrentChange (value) {
                this.currentPage = value
            }
        }
    }
</script>

它工作得很好，但它可能会很痛苦，因为我应该在任何想要使用分页的组件中重复所有这些内容。任何人都可以举例说明如何在集合仍保留在父组件上时将此分页创建为子组件。

我已经尝试创建它，但坚持如何将返回值从计算属性传递到父组件。

例如，我失败的尝试创建子组件

child.vue

... // all of template element and functions
computed: {
    studentList () {}
},
methods: {
    updateStudentList () {
        this.$emit('changed-value', this.studentList) // as you can see, studentList is computed function like parent code above
    }
}

parent.vue

// there's no more studentList function on computed property in parent component
// instead, it moved on child component
<li v-for="student in students">{{ student.full_name }}</li>
<child-pagination v-on:changed-value="rebuildStudent"></child-pagination>
...
methods: {
    rebuildStudent (newCollection) {
       this.students = newCollection
    }   
}

【问题讨论】：

标签： javascript vue.js pagination element-ui

【解决方案1】：

更新

经过一番修改，终于可以解决了。

计算数组应保留在父组件上，并在集合数组上添加一个存储begin 和end 索引的对象。该对象将根据使用方法的子事件进行更改。

parent.vue

<template>
    <pagination v-model="pageIndex"
        v-on:paginationInit="paginationInit"
        collections="students">
    </pagination>
</template>

data () {
    return {
        students: [] // collection
        pageIndex: {}
    }
},
computed: {
    studentList () {
        return this.students.slice(pageIndex.begin, pageIndex.end)
    }
},
methods: {
    // This method emitted from child component
    paginationInit (pageIndex) {
        this.pageIndex.begin = pageIndex.begin
        this.pageIndex.end = pageIndex.end
    }
}

然后在子组件中，计算逻辑移到此处的方法上，该方法处理来自单击的分页元素的事件。

child.vue

data () {
    return {
        pageIndex: { begin: 0, end: 10 }
    }
},
created () {
    this.init()
},
methods: {
    init () {
        this.$emit('paginationInit', this.pageIndex)
    },
    handleCurrentChange (page) {
        this.pageIndex.begin = (page - 1) * this.pageSize
        this.pageIndex.end = this.pageSize * page
        this.$emit('input', this.pageIndex)
    }
}

【讨论】：