子组件

<template>
<div style="display:flex;justify-content:center;margin-top:20px">
        <el-pagination background @current-change="currpage" :current-page="nowpage"
        :page-size="20" layout="total,prev, pager, next,jumper" :total="total" />
    </div>
</template>
<script setup>
// 接受父级数据，注册事件
const props = defineProps(['total','nowpage'])
const emits = defineEmits(['page_change'])
//获取当前页
const currpage = (val)=>{
    console.log(val)
    //当前页返回父级
    emits('page_change',val)
}
</script>
<style scoped>
/deep/ .is-active{
    background-color: #2757FF !important;
}
</style>

父组件

//导入子组件
import pagechange from '../components/pagechange.vue'
//vue3语法糖不需要注册组件，其余需要注册组件再使用



<!-- 使用分页组件 -->
<pagechange :total="total" :nowpage="searchdata.pageNo" @page_change="page_change" />





//data数据声明
//成员总数
const total = ref(0)
//搜索
const searchdata = reactive({
   //当前页
    pageNo:1,
    pageSize:20,
})




//监听分页子组件传来的数据
const page_change = (val)=>{
    searchdata.pageNo = val
    //下面执行刷新列表
}