vue3分页组件@update:current-page
时间: 2024-03-14 11:42:39 浏览: 45
下面是一个基于 Vue 3 的分页组件,其中包含 `updateCurrentPage` 函数来更新当前页码:
```html
<template>
<div class="pagination">
<button @click="previousPage" :disabled="currentPage === 1">上一页</button>
<span>{{ currentPage }}</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</template>
<script>
export default {
props: {
totalItems: {
type: Number,
required: true
},
itemsPerPage: {
type: Number,
default: 10
}
},
computed: {
totalPages() {
return Math.ceil(this.totalItems / this.itemsPerPage);
}
},
data() {
return {
currentPage: 1
};
},
methods: {
previousPage() {
if (this.currentPage > 1) {
this.currentPage--;
this.updateCurrentPage();
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
this.updateCurrentPage();
}
},
updateCurrentPage() {
// 在这里执行更新当前页码的操作
console.log("当前页码是:" + this.currentPage);
}
}
};
</script>
```
该组件接收 `totalItems` 和 `itemsPerPage` 两个参数,分别表示总共的条目数和每页显示的条目数。在 `computed` 中计算出总页数 `totalPages`,在 `data` 中定义当前页码 `currentPage`,在 `methods` 中实现了上一页和下一页的点击事件,并在其中调用了 `updateCurrentPage` 函数来更新当前页码。
您可以在 `updateCurrentPage` 函数中添加其他操作来更新当前页码所对应的数据。在父组件中使用该分页组件时,需要传入 `totalItems` 和 `itemsPerPage` 两个参数,并监听 `updateCurrentPage` 事件来获取当前页码。例如:
```html
<template>
<div>
<my-pagination :total-items="totalItems" :items-per-page="itemsPerPage" @update-current-page="onUpdateCurrentPage" />
<!-- 在这里渲染当前页码所对应的数据 -->
</div>
</template>
<script>
import MyPagination from "./MyPagination.vue";
export default {
components: {
MyPagination
},
data() {
return {
totalItems: 100,
itemsPerPage: 10,
currentPage: 1
};
},
methods: {
onUpdateCurrentPage(page) {
this.currentPage = page;
// 在这里更新当前页码所对应的数据
}
}
};
</script>
```
在这个例子中,父组件监听了 `updateCurrentPage` 事件,当事件触发时将当前页码 `currentPage` 更新为事件传递过来的页码 `page`,并在 `onUpdateCurrentPage` 函数中更新当前页码所对应的数据。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)