Vue-laypage 是一款用于 Vue.js 的分頁插件，可以幫助我們快速構建分頁功能。下面就讓我們一起了解一下如何使用它。

首先，我們需要安裝 vue-laypage 插件：

npm install vue-laypage

然后在需要使用的頁面中引入并注冊插件：

import Vue from 'vue'
import VueLaypage from 'vue-laypage'

Vue.use(VueLaypage);

接下來就可以在頁面中使用分頁組件了，組件的基本用法如下：

<template>
<div>
<laypage :total="total" :limit="limit" :curr="curr" @change="pageChange"></laypage>
</div>
</template>
<script>
export default {
data() {
return {
total: 100,
limit: 10,
curr: 1,
}
},
methods: {
pageChange(curr) {
this.curr = curr;
// 請求新的數據
}
}
}
</script>

laypage 組件接收三個 props 參數：

• total：總的數據量
• limit：每頁顯示的數據量
• curr：當前頁數

還有一個重要的事件：change事件，當用戶點擊分頁組件時，組件會觸發該事件，通過該事件可以獲取到用戶選擇的頁數。

至此，我們就完成了 vue-laypage 的基本使用，如果需要修改分頁組件的樣式，可以通過在樣式文件中覆蓋默認樣式。