vue3.0手动封装分页组件的方法
本文实例为大家分享了vue3.0手动封装分页组件的具体代码，供大家参考，具体内容如下 1.父组件引入 src/views/goods/components/goods-comment.vue <!-- page表示初始化分页时，默认显示第几页 --> <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' /> //调接口 import {findCommentListByGoods }
Vue3.0 手动封装分页组件是一个常见的前端任务，尤其在开发数据密集型应用时，为了提高用户体验，分页是必不可少的功能。本实例将详细介绍如何在 Vue3 中实现一个自定义的分页组件。
我们从父组件的角度出发。在 `src/views/goods/components/goods-comment.vue` 文件中，父组件需要引入并使用封装好的分页组件。通过 `<XtxPagination>` 标签，我们可以设置初始化分页的参数，如默认显示的页码、每页的数量（`pagesize`）以及数据总量（`total`）。`@change-page` 是监听分页变化的事件，当用户点击分页按钮时，会触发这个事件，传入新的页码值。父组件中还展示了如何调用接口获取数据，这里使用了 `findCommentListByGoods` 函数，该函数可能来自 `@/api/product.js`，用于根据商品ID和筛选条件获取评论列表。
```html
<template>
<!-- ... -->
<XtxPagination
@change-page='changePage'
:pagesize='reqParams.pageSize'
:total='total'
:page='1'
/>
<!-- ... -->
</template>
<script>
import { findCommentListByGoods } from '@/api/product.js'
export default {
setup() {
// ...
const reqParams = reactive({
page: 1,
pageSize: 10,
// ...
})
watch(reqParams, () => {
findCommentListByGoods(goods.value.id, reqParams).then(ret => {
total.value = ret.result.counts
list.value = ret.result.items
})
}, { immediate: true })
const changePage = (page) => {
reqParams.page = page
}
// ...
}
}
</script>
```
接下来，我们看子组件 `src/components/library/xtx-pagination.vue` 的实现。在这里，我们定义了一个名为 `XtxPagination` 的组件，它包含上一页、下一页和页码列表。模板中使用 `v-for` 遍历生成页码按钮，并通过 `@click` 事件处理分页切换。`changePage` 方法负责改变当前页码，并通过 `$emit` 将新的页码值发送回父组件。同时，使用 `computed` 或 `ref` 来动态计算当前页码、总页数等信息。
```html
<template>
<div class="xtx-pagination">
<a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage === 1}">上一页</a>
<!-- ... -->
<a @click='changePage(item)' href="javascript:;" :class='{active: currentPage === item}' v-for='item in list' :key='item'>{{item}}</a>
<!-- ... -->
<a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage === pages}'>下一页</a>
</div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
name: 'XtxPagination',
props: {
total: {
type: Number,
default: 80
},
pageSize: {
type: Number,
default: 10
},
// ...
},
setup(props, { emit, attrs }) {
// ...
const currentPage = ref(1)
const pages = computed(() => Math.ceil(props.total / props.pageSize))
const changePage = (page) => {
if (page === 'prev') {
currentPage.value = currentPage.value <= 1 ? 1 : currentPage.value - 1
} else if (page === 'next') {
currentPage.value = currentPage.value >= pages.value ? pages.value : currentPage.value + 1
} else {
currentPage.value = page
}
emit('change-page', currentPage.value)
}
return {
currentPage,
changePage
}
}
}
</script>
```
在这个例子中，我们看到了 Vue3 中使用 `setup` 函数和 Composition API 的方式来组织组件逻辑，这比 Vue2 中的选项式 API 更加灵活且模块化。通过 `reactive` 和 `watch` 实现数据响应式，使用 `computed` 计算属性，以及 `ref` 创建响应式引用，这些都体现了 Vue3 的新特性。同时，通过 `@change-page` 事件通信，实现了父子组件间的交互。
总结来说，封装 Vue3 分页组件涉及的关键知识点包括：
1. 组件的创建与使用：定义组件的模板、脚本和样式。
2. 使用 `props` 传递数据：父组件通过 `props` 向子组件传递总条数、每页条数和初始页码。
3. Composition API：利用 `setup` 函数、`reactive`、`watch`、`computed` 和 `ref` 管理状态和响应式。
4. 事件绑定与监听：通过 `@click` 监听用户操作，`$emit` 触发事件通知父组件。
5. 计算属性：`computed` 用于计算总页数。
6. 双向数据绑定：通过 `ref` 创建响应式引用，实现页码的双向绑定。
以上就是 Vue3.0 手动封装分页组件的具体步骤和涉及的核心技术，这样的组件可以复用在多个场景，提高代码的可维护性和可扩展性。
评论0