nuxt同一个页面两个分页组件完整实列代码

以下是一个使用 Nuxt.js 的页面，其中包含两个分页组件的完整代码示例：

<template>
  <div>
    <h1>Page Title</h1>

    <h2>First Pagination Component</h2>
    <pagination :items="items" :per-page="perPage" @change="onPageChange" />
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">{{ item.name }}</li>
    </ul>

    <h2>Second Pagination Component</h2>
    <pagination :items="otherItems" :per-page="perPage" @change="onOtherPageChange" />
    <ul>
      <li v-for="item in otherPaginatedItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  components: {
    Pagination
  },

  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
        { id: 6, name: 'Item 6' },
        { id: 7, name: 'Item 7' },
        { id: 8, name: 'Item 8' },
        { id: 9, name: 'Item 9' },
        { id: 10, name: 'Item 10' }
      ],
      otherItems: [
        { id: 11, name: 'Other Item 1' },
        { id: 12, name: 'Other Item 2' },
        { id: 13, name: 'Other Item 3' },
        { id: 14, name: 'Other Item 4' },
        { id: 15, name: 'Other Item 5' },
        { id: 16, name: 'Other Item 6' },
        { id: 17, name: 'Other Item 7' },
        { id: 18, name: 'Other Item 8' },
        { id: 19, name: 'Other Item 9' },
        { id: 20, name: 'Other Item 10' }
      ],
      page: 1,
      otherPage: 1,
      perPage: 3
    }
  },

  computed: {
    paginatedItems() {
      const start = (this.page - 1) * this.perPage
      const end = start + this.perPage
      return this.items.slice(start, end)
    },

    otherPaginatedItems() {
      const start = (this.otherPage - 1) * this.perPage
      const end = start + this.perPage
      return this.otherItems.slice(start, end)
    }
  },

  methods: {
    onPageChange(page) {
      this.page = page
    },

    onOtherPageChange(page) {
      this.otherPage = page
    }
  }
}
</script>

该页面包含两个分页组件，分别用于显示 `items` 和 `otherItems` 数组中的数据。每个分页组件都使用相同的 `perPage` 属性和 `@change` 事件处理程序。分页组件本身是一个单独的 Vue 组件，可以在 `components` 对象中注册并在模板中使用。

在 `data` 对象中，我们定义了两个数组和三个变量：`page`、`otherPage` 和 `perPage`。`page` 和 `otherPage` 变量用于跟踪当前页数，而 `perPage` 变量用于指定每页显示多少项数据。在 `computed` 对象中，我们定义了两个计算属性，`paginatedItems` 和 `otherPaginatedItems`，用于根据当前页数和每页显示的项数获取在当前页上显示的数据。

在 `methods` 对象中，我们定义了两个事件处理程序，`onPageChange` 和 `onOtherPageChange`，它们被传递给各自的分页组件，以便当用户更改页面时更新相应的 `page` 或 `otherPage` 变量。