Vue 分页组件实现详解

前言

在前一篇文章中，我们使用 Vue 实现了前端分页效果。这篇文章将独立开发一个分页组件，实现更灵活的分页功能。

代码实现

在开发 Vue 组件时，需要考虑以下关键问题：

1. 组件接收的参数

分页组件需要接收以下参数：

name：组件名称或其他标识符

page-size：每页显示条目个数

total：总条目数

current-page：当前页数

layout：布局配置，支持 jumper 和 total

change：当前页改变时触发的事件

2. 父子组件通信

组件间通信主要通过 props 和 emit 实现：

Props 属性传递

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

Props 验证

props: {
  propA: Number,
  propB: [String, Number],
  propC: {
    type: String,
    required: true
  },
  propD: {
    type: Number,
    default: 100
  },
  propE: {
    type: Object,
    default: function () {
      return { message: 'hello' }
    }
  },
  propF: {
    validator: function (value) {
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

3. 组件逻辑实现

Template 结构

Script 部分

Style 样式

父组件使用

在父组件中引入并使用分页组件：

遇到的问题

在开发过程中可能会遇到以下问题：

子组件修改 currentPage 导致父组件重新渲染，导致值被覆盖

解决方案：通过 emit 传递 currentPage 的值，避免直接修改父组件的 prop。

changePage: function (idx) {
  if (idx !== this.currentPage && idx > 0 && idx <= this.totalPage) {
    this.$emit('change', { curPage: idx });
  }
}

父组件监听 currentPage 变化

onPageChange: function (page) {
  this.curPage = page.curPage;
}

最后

通过以上步骤，我们成功实现了一个功能完善的分页组件。分页组件的核心在于明确父子组件的通信机制和合理的布局设计。只要掌握了 Vue 组件的基础知识，开发一个高效的分页组件并不难。

转载地址：http://qzsuz.baihongyu.com/

你可能感兴趣的文章