vue3开发入门教程：使用组件实现分页
分页是一个常见的需求，因为在实际开发中，我们往往需要将大量的数据分成若干页以展示给用户。在VUE3开发中，可以通过使用组件实现分页功能，本文将介绍如何使用组件实现简单的分页功能。
1.创建组件
首先，我们需要创建一个分页组件，使用“vue create”命令创建VUE项目，并在src/components目录下创建Pagination.vue文件。
在Pagination.vue文件中，我们需要声明组件的名称、data数据项、methods方法等。代码如下：
立即学习“前端免费学习笔记（深入）”；
<template>
<div>
<ul v-if="pages.length">
<li v-if="currentPage !== 1" @click="changePage(currentPage - 1)"><</li>
<li v-for="page in pages" :key="page" :class="{'active': page === currentPage}" @click="changePage(page)">{{ page }}</li>
<li v-if="currentPage !== totalPage && totalPage > 1" @click="changePage(currentPage + 1)">></li>
</ul>
</div>
</template>
<script>
export default {
name: 'Pagination',
data() {
return {
currentPage: 1,
pageSize: 10,
totalPage: 0,
pages: []
}
},
props: {
total: {
type: Number,
default: 0
},
pageSize: {
type: Number,
default: 10
}
},
watch: {
total() {
this.init()
}
},
methods: {
init() {
this.totalPage = Math.ceil(this.total / this.pageSize)
this.pages = []
for (let i = 1; i <= this.totalPage; i++) {
this.pages.push(i)
}
},
changePage(page) {
if (this.currentPage === page) return
this.currentPage = page
// 触发自定义事件
this.$emit('page-change', this.currentPage)
}
},
created() {
this.init()
}
}
</script>
<style>
.pagination {
text-align: center;
}
ul {
display: inline-block;
padding-left: 0;
margin: 0;
border-radius: 4px;
}
li {
display: inline;
color: #2b2b2b;
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #eee;
margin-right: 3px;
cursor: pointer;
}
li:hover {
background-color: #eee;
}
.active {
background-color: #00a0e9;
color: #fff;
border: 1px solid #00a0e9;
cursor: default;
}
li:first-child {
margin-right: 10px !important;
}
li:last-child {
margin-left: 10px !important;
}
</style>在代码中，我们需要实现分页的初始化方法init，以及向外提供分页切换的方法changePage。同时，我们通过watch监听total属性的变化，当total属性变化时，重新调用init方法初始化分页。
2.引入组件
接下来，在我们的组件中使用分页组件。例如，我们在App.vue中引入Pagination组件，并使用v-for指令在模板中循环展示数据，同时监听Pagination组件的page-change自定义事件。
代码如下：
<template>
<div class="container">
<ul>
<li v-for="item in list" :key="item.id">{{item.text}}</li>
</ul>
<Pagination :total="total" :page-size="pageSize" @page-change="handlePageChange"/>
</div>
</template>
<script>
import Pagination from './components/Pagination'
export default {
name: 'App',
components: {
Pagination
},
data() {
return {
total: 100,
list: []
}
},
methods: {
initData() {
for (let i = 1; i <= this.total; i++) {
this.list.push({
id: i,
text: `第 ${i} 条数据`
})
}
},
handlePageChange(page) {
const start = (page - 1) * this.pageSize
const end = start + this.pageSize > this.total ? this.total : start + this.pageSize
this.list = []
for (let i = start + 1; i <= end; i++) {
this.list.push({
id: i,
text: `第 ${i} 条数据`
})
}
}
},
created() {
this.initData()
}
}
</script>
<style>
.container {
margin: 0 auto;
width: 500px;
}
ul {
padding: 0;
list-style: none;
}
li {
border: 1px solid #eee;
margin-top: 10px;
padding: 10px;
}
</style>在代码中，我们需要通过计算得到当前页展示的数据范围，并根据范围重新渲染数据列表。
3.运行并测试
最后，在命令行中运行“npm run serve”命令，启动开发服务器，并在浏览器中访问http://localhost:8080/，即可看到页面展示了分页组件和数据列表。你可以尝试在页面上点击分页按钮，观察数据列表是否能够正确地切换页码。
以上就是使用组件实现分页的简单示例，在实际开发中，你可以根据项目的需求对分页组件的样式和属性进行自定义，进一步提升用户体验。
