父组件 :
<!-- 分页器组件 -->
// 定义一个传递数据的名称 --> total
// 传递的数据为 --> simTotal
<paging :total="simTotal"></paging>
子组件 :
<template>
<div class="main">
<!-- 分页器组件 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
layout=" prev, pager, next, jumper"
// 在这里渲染数据, 这一行文字记得要删除
:total="total"
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
// 默认所在页数
currentPage: 1
};
},
// 使用 props 接收父组件传递的数据, 使用 ['父组件传递的数据名称']
props: ["total"],
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
// 将选择的页数传递到父组件中
this.$bus.$emit("changeTotal", val);
}
}
};
</script>