vue3使用分页组件实现数据切换

在 Vue 3 中使用分页组件实现数据切换可以遵循以下步骤：

1. 创建一个分页组件，该组件应该包含一些参数和方法来处理分页逻辑。例如，每页显示的项目数，当前页码等等。

2. 在父组件中将数据传递到分页组件中，并将分页参数绑定到分页组件中。例如，将要分页的数据数组传递给分页组件，并将每页显示的项目数和当前页码绑定到分页组件中。

3. 在分页组件中，使用计算属性或者 watch 监听分页参数的变化，从而在数据数组中筛选出当前页要显示的数据，然后将这些数据通过事件或者回调函数传递给父组件，从而实现数据切换。

以下是一个简单的分页组件实现示例：

<template>
  <div>
    <ul>
      <li v-for="item in displayedData">{{ item }}</li>
    </ul>
    <div>
      <button @click="previousPage">Previous</button>
      <span>{{ currentPage }} / {{ pageCount }}</span>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      currentPage: 1,
    };
  },
  computed: {
    pageCount() {
      return Math.ceil(this.data.length / this.pageSize);
    },
    displayedData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.data.slice(startIndex, endIndex);
    },
  },
  methods: {
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
  },
};
</script>

在父组件中引入该分页组件，并将要分页的数据数组和每页显示的项目数绑定到分页组件中：

<template>
  <div>
    <Pagination :data="items" :page-size="pageSize" @page-changed="onPageChanged" />
  </div>
</template>

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

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      items: [/* some data to display */],
      pageSize: 10,
    };
  },
  methods: {
    onPageChanged(pageData) {
      // handle page changed event
    },
  },
};
</script>

在分页组件中，当用户点击 “Previous” 或 “Next” 按钮时，会触发 `previousPage` 或 `nextPage` 方法，从而更新当前页码，并通过 `displayedData` 计算属性筛选出当前页要显示的数据。在 `displayedData` 计算属性中，我们使用了 `Array.prototype.slice` 方法从数据数组中获取当前页要显示的数据。最后，将这些数据通过事件或者回调函数传递给父组件，以便父组件更新界面显示。