Vue分页器组件是一个常见的组件，用于在页面中展示分页数据，并提供翻页功能。在本篇博客中，我们将介绍如何用Vue封装一个分页器组件。

1. 确定组件需求

在开始封装分页器组件之前，我们需要明确组件的需求和功能。一个分页器组件需要包含以下功能：

- 展示当前页码和总页码数
- 提供翻页功能，包括上一页、下一页、跳转到指定页码等
- 支持自定义每页展示的数据数量
- 提供事件回调函数，以便父组件可以监听翻页事件并更新分页数据

2. 编写组件代码

根据上述需求，我们可以开始编写分页器组件的代码。以下是一个简单的分页器组件示例：

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{currentPage}} / {{totalPages}}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    <input type="number" v-model.number="goToPage" @keydown.enter="jumpToPage">
    <button @click="jumpToPage">跳转</button>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    totalPages: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      goToPage: ''
    }
  },
  methods: {
    prevPage() {
      this.$emit('pageChange', this.currentPage - 1)
    },
    nextPage() {
      this.$emit('pageChange', this.currentPage + 1)
    },
    jumpToPage() {
      let page = this.goToPage
      if (page < 1) {
        page = 1
      } else if (page > this.totalPages) {
        page = this.totalPages
      }
      this.$emit('pageChange', page)
    }
  }
}
</script>

在这个代码中，我们定义了一个名为`Pagination`的组件，并定义了三个props：`currentPage`表示当前页码，`totalPages`表示总页码数，`pageSize`表示每页展示的数据数量。我们还定义了一个data属性`goToPage`，用于存储用户输入的跳转页码。

在模板中，我们使用了三个按钮来实现翻页功能，分别是上一页、下一页和跳转按钮。我们还展示了当前页码和总页码数。当用户点击上一页或下一页按钮时，我们会触发`prevPage`和`nextPage`方法，并通过`$emit`方法发送`pageChange`事件，以便父组件可以监听并更新分页数据。当用户输入页码并点击跳转按钮时，我们会触发`jumpToPage`方法，并根据用户输入的页码跳转到对应的页面。

3. 使用组件

完成组件代码后，我们可以在父组件中使用该组件。以下是一个示例：

<template>
  <div>
    <ul>
      <li v-for="item in pagedData">{{item}}</li>
    </ul>
    <pagination :current-page="currentPage" :total-pages="totalPages" :page-size="pageSize" @pageChange="handlePageChange" />
  </div>
</template>

<script>
import Pagination from './Pagination.vue'

export default {
  name: 'MyComponent',
  components: {
    Pagination
  },
  data() {
    return {
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
      currentPage: 1,
      pageSize: 5
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize)
    },
    pagedData() {
      let start = (this.currentPage - 1) * this.pageSize
      return this.data.slice(start, start + this.pageSize)
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    }
  }
}
</script>

在这个示例中，我们定义了一个名为`MyComponent`的父组件，并引入了我们刚才编写的分页器组件。我们还定义了一个data属性`data`，其中包含了20个数字。我们使用computed属性`totalPages`计算出总页码数，并使用`pagedData`方法计算出当前页展示的数据。当用户翻页时，我们会触发`handlePageChange`方法，并更新当前页码。

4. 总结

在本篇博客中，我们介绍了如何用Vue封装一个分页器组件。我们先确定了组件的需求和功能，然后编写了组件代码，并在父组件中使用了该组件。通过这个示例，我们可以学习到如何在Vue中封装一个组件，并且掌握了一些常见的Vue组件开发技巧。