在使用 Element Plus 组件时，有时会遇到组件不完全符合需求的情况，这时可能需要对其进行二次封装。在封装 Pagination 组件时，我们会发现一些属性和函数无法正常使用，下面将详细探讨这些问题，并提供一下思路和想法。
封装组件代码如下：
import { ElPagination } from 'element-plus';
import './index.less';
export default defineComponent({
name: 'MyPagination',
props: paginationProps,
setup(props, { attrs, slots }) {
return () => (
<div class={`pagination-common`}>
<ElPagination
{...props}
{...attrs}
>
{slots.default ? slots.default() : null}
</ElPagination>
</div>
);
},
});
1. 属性
1.1 pageSize 属性
在使用自定义 MyPagination 组件时：
import { defineComponent, ref } from "vue";
import { MyPagination } from "../MyPagination";
import "./index.less";
export default defineComponent({
name: "Demo",
setup() {
return () => (
<div class="paginationContainer">
<MyPagination
layout="total, sizes, prev, pager, next, jumper"
total={500}
pageSize={20}
/>
</div>
);
}
});代码警告⚠️：
简单分析一下，可以看到是 pageSize 出现问题导致的报错，为什么呢？
对于 Element Plus 的 Pagination 组件而言，pageSize 是一个受控属性，也就是需要外部管理它的值并对变动进行响应。
那该属性应该怎么使用呢？
import { defineComponent, ref } from "vue";
import { MyPagination } from "../MyPagination";
import "./index.less";
export default defineComponent({
name: "Demo",
setup() {
const pageSize = ref(30);
return () => (
<div class="paginationContainer">
<MyPagination
layout="total, sizes, prev, pager, next, jumper"
total={500}
v-model:pageSize={pageSize.value}
/>
</div>
);
}
});
成功展示的原因：
1、双向绑定机制
使用 v-model 实现双向绑定，确保组件内的 pageSize 更新会自动反映到外部的数据（pageSizeRef），从而保持组件和外部状态的一致。
2、事件触发更新
Pagination 组件内部会触发 update:pageSize 事件来通知外部其 pageSize 的改变。使用 v-model:pageSize 可以自动捕获并处理这个事件，避免手动监听 update:pageSize 事件。
1.2 currentPage 属性
同理 currentPage 表示当前的页码，也是受控属性，需要绑定 v-model。当用户点击分页控件来切换页码时，Pagination 组件 会触发 update:currentPage 事件更新外部的 currentPage 绑定的变量。
使用如下：
import { defineComponent, ref } from "vue";
import { MyPagination } from "../MyPagination";
import "./index.less";
export default defineComponent({
name: "Demo",
setup() {
const currentPage = ref(3);
const pageSize = ref(30);
return () => (
<div class="paginationContainer">
<MyPagination
layout="total, sizes, prev, pager, next, jumper"
total={500}
v-model:pageSize={pageSize.value}
v-model:currentPage ={currentPage.value}
/>
</div>
);
}
});
1.3 total 属性
total 表示数据总数，也是受控属性。
虽然 total 本身不需要 v-mode（因为其通常是只读属性，用于展示总数据量），但在某些场景下会根据后端返回数据动态更新，因此不使用 v-model 绑定的情况较多。
2. 方法
大家如果使用过这个组件，肯定了解其身上存在 4 个常见方法，其中，唯一能够正常使用的方法是 currentChange，而其他方法则需要额外处理才能执行。感兴趣的朋友可以亲自尝试一下，这里就不详细介绍啦。
解决方法，我们点开 Pagination 组件 props 的源码可以看到方法的名称：
因此在使用的时候，严格遵循命名规则，如下：
import { defineComponent, ref } from "vue";
import { MyPagination } from "../MyPagination";
import "./index.less";
export default defineComponent({
name: "Demo",
setup() {
const currentPage = ref(3);
const pageSize = ref(30);
const handleCurrentChange = (val) => {
console.log(`当前页码已变更，新的页码为：${val} 页`);
};
const handleSizeChange = (size) => {
console.log(`每页显示的条数已变更，新的条数为：${size} 条`);
};
const handlePrevClick = (page) => {
console.log(`点击上一页按钮，点击之前页码为：${page} 页`);
};
const handleNextClick = (page) => {
console.log(`点击下一页按钮，点击之前页码为：${page} 页`);
};
return () => (
<div class="paginationContainer">
<MyPagination
layout="total, sizes, prev, pager, next, jumper"
total={500}
v-model:pageSize={pageSize.value}
v-model:currentPage ={currentPage.value}
onCurrent-change={handleCurrentChange}
onSize-change={handleSizeChange}
onPrev-click={handlePrevClick}
onNext-click={handleNextClick}
/>
</div>
);
}
});所有的方法均可以成功使用：
如果到目前为止仍然存在一些问题，那么我们就需要使用 emits 来更新数据。
添加如下代码：
import { ElPagination } from 'element-plus';
import './index.less';
export default defineComponent({
name: 'MyPagination',
props: paginationProps,
emits: [
"update:prevClick",
"update:nextClick",
"currentChange",
"update:sizeChange",
],
setup(props, { attrs, slots }) {
return () => (
<div class={`pagination-common`}>
<ElPagination
{...props}
{...attrs}
>
{slots.default ? slots.default() : null}
</ElPagination>
</div>
);
},
});
emits 用于声明组件可以发出的自定义事件。这使得父组件能够监听这些事件，并对其作出响应。通过声明 emits 可以清晰地定义组件的外部接口。
至此，已经解决了我在封装 Pagination 组件所遇到的问题，如果还有其他的问题，可以继续深入探讨。
