Vue 1 提供了一個非常方便的分頁組件，可以輕松地實現分頁功能。在 Vue 中，我們可以使用組件的方式來創建一個分頁組件，并借助 Vue 的響應式數據特性來實現變量更新。

下面是一個 Vue 1 分頁組件的示例：

Vue.component('pagination', {
props: {
total: {
type: Number,
required: true
},
perPage: {
type: Number,
required: true
},
current: {
type: Number,
default: 1
}
},
computed: {
totalPages: function() {
return Math.ceil(this.total / this.perPage);
},
pages: function() {
var pages = [];
var startPage = this.current - 2;
var endPage = this.current + 2;
if (startPage< 1) {
startPage = 1;
endPage = Math.min(this.totalPages, 5);
}
if (endPage >this.totalPages) {
endPage = this.totalPages;
startPage = Math.max(1, this.totalPages - 4);
}
for (var i = startPage; i<= endPage; i++) {
pages.push(i);
}
return pages;
}
},
methods: {
setPage: function(page) {
if (page >= 1 && page<= this.totalPages) {
this.$emit('page-changed', page);
}
}
},
template: '
' +
'
« Prev
' +
'
{{ page }}
' +
'
Next »
' +
'
'
});

上述代碼中，我們定義了一個名為“pagination”的分頁組件，該組件接收三個 props：total、perPage 和 current。total 表示總共有多少條數據，perPage 表示每頁顯示多少條數據，current 表示當前頁碼。

組件中還定義了計算屬性 totalPages 和 pages，分別表示總頁數和當前顯示的頁碼列表。方法 setPage 用于設置用戶點擊后要跳轉的頁碼，同時通過 $emit 方法觸發 page-changed 事件，用于與父組件通信。

最后，我們使用 template 屬性來定義分頁組件的 HTML 結構，并在其中使用 v-for 指令渲染頁碼列表，使用 v-if 指令判斷是否需要渲染上一頁和下一頁按鈕。