vue分页怎么对接口

<code class="sh">npm install vue-pagination</code>

<code class="js">import Vue from 'vue'
import Pagination from 'vue-pagination'

Vue.component('pagination', Pagination)</code>

<code class="html"><template>
  <div>
    <pagination :total-rows="totalRows" :page-size="pageSize" @current-page="currentPage"></pagination>
  </div>
</template>

<script>
export default {
  props: ['totalRows', 'pageSize'],
  methods: {
    currentPage(page) {
      // 根据当前页数请求数据
      this.$emit('page-change', page)
    }
  }
}
</script></code>

<code class="js">currentPage(page) {
  // 根据当前页数和每页大小计算起始位置
  const skip = (page - 1) * this.pageSize
  // 发送请求获取当前页数据
  fetch(`api/data?skip=${skip}&limit=${this.pageSize}`)
    .then(res => res.json())
    .then(data => {
      // 更新页面数据
      this.$emit('update-data', data)
    })
}</code>

<code class="html"><pagination @update-data="updateData"></pagination></code>

<code class="js">methods: {
  updateData(data) {
    // 更新页面上的数据
    this.data = data
  }
}</code>