为了封装一下Element-Plus的分页插件，需要实现父子组件之间的传值。
2. 父组件
<script setup lang="ts">
let queryParams: pageType = reactive({
queryText: "",
pageIndex: 2,
pageSize: 20,
orderby: "string",
sort: "string",
total: 100
});
</script>
<repagination
//传入数据的总数
:total="queryParams.total"
//分页控件展示数据的条数
:limit="queryParams.pageSize"
//子组件里面的通过pagination方法来调用父组件里面getList方法，实现数据重加载
@pagination="getList"
//子组件里面的props中的page与父组件里面的queryParams.pageIndex实现双向绑定
v-model:page="queryParams.pageIndex"
//同上述page,页面展示数据大小
v-model:limit="queryParams.pageSize"
></rePagination>
<script lang="ts" setup>
import { onMounted } from "vue";
interface PageProps {
total: number;
labels?: string[];
page: number;
limit: number;
layout: string;
}
//子组件接收父组件的props，并且这顶默认值
const props = withDefaults(defineProps<PageProps>(), {
total: 100, //数据总量，不是分页总量
labels: () => ["one", "two"],
page: 1,
limit: 20, //页面大小
layout: "total, sizes, prev, pager, next, jumper"
});
//子组件调用父组件的方法，和更新props中的page和limit的值
const emit = defineEmits<{
(e: "pagination"): void;
(e: "update:page", currentPageIndex): void;
(e: "update:limit", pageSize): void;
}>();
//pagesize改变的时候触发
const handleSizeChange = val => {
emit("update:limit", val);
emit("pagination");
};
//当前页面被触发
const handleCurrentChange = val => {
emit("update:page", val);
emit("pagination");
};
</script>
<el-pagination
:layout="props.layout"
:page-count="10"
:total="props.total"
:current-page="props.page"
:page-size="props.limit"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
>
</el-pagination>
简简单单的功能，搜索了好久都没有找到。希望自己记录一下可以帮助其他跟我遇到同样问题的人。
,
