代码语言：javascript复制
/// 通过props来把参数传递给父组件 page-size 在props接收的时候会自动的变成pageS
<template>
<paging-query :totals="total" :page-size="pageSize" @handleSizeChangeSub="handleSizeChangeFun" @handleCurrentChangeSub="handleCurrentChangeFun"></paging-query>
</div>
</template>
<script>
import PagingQuery from "@/components/paging-query";
export default {
data() {
return {
total: 300,//// 父组件把total 传递给子组件 :totalss="total" 那么子组件接收的就是totalss 子组件里面出发这个事件 handleSizeChangeSub
pageSize: 0,
},
components: {
PagingQuery
},
methods: {
handleSizeChangeFun(v) {
console.log(v);
this.pageSize = v;
// this._enterpriseList(); //更新列表
},
handleCurrentChangeFun(v) { //页面点击
this.pageNum = v; //当前页
// this._enterpriseList(); //更新列表
},
}
};
</script>
<style>
</style>- 子组件
<template>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totals" style="float:right;">
</el-pagination>
</template>
<script type="text/ecmascript-6">
export default {
components: {
},
data() {
return {
}
},
props: {
// 接收父组件传递过来的值
pageSize: {
type: Number,
default: 10
},
totals: {
type: Number,
default: 1
}
},
watch: {
},
methods: {
//每页展示条数
handleSizeChange(val) {
//事件传递 handleSizeChangeSub 是父组件定义的自定义事件
this.$emit('handleSizeChangeSub', val);
},
//当前页
handleCurrentChange(val) {
//事件传递 在this.$emit的同时,携带参数
this.$emit('handleCurrentChangeSub', val);
}
},
// 过滤器设计目的就是用于简单的文本转换
filters: {},
// 若要实现更复杂的数据变换，你应该使用计算属性
computed: {
},
created() {
},
mounted() {},
destroyed() {}
}
</script>
<style lang="" type="text/css" scoped>
</style>
