為了封裝一下Element-Plus的分頁插件，需要實現父子組件之間的傳值。

<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>

簡簡單單的功能，搜索了好久都沒有找到。希望自己記錄一下可以幫助其他跟我遇到同樣問題的人。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!