<!-- 分页组件 -->
<template>
	<div class='pagination'>
		<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="currentPage"
						:page-size="100"
						layout="prev, pager, next, jumper"
						:total="1000">
		</el-pagination>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "PaginationComponent",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				// currentPage: 1
			};
		},
		props: {
			// 避免直接改变prop属性
			'currentPage': {
				required: false,
				default: 1
			},
			'total': {
				required: false,
				default: 0
			},
			'limit': {
				required: false,
				default: 10
			},
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			// currentPage(val) {
			// 	console.log(val)
			// 	// 改变这个值并不会触发 handleCurrentChange
			// 	if (typeof val === "number") {
			// 		console.log('prop currentPage!!!', val);
			// 		this.currentPage = val;
			// 	}
			// },
		},
//方法集合
		methods: {
			// 当前页变化
			handleCurrentChange(val) {
				this.$emit("handleCurrentChange", val);
			},
			// size变化
			handleSizeChange(val) {
				this.currentPage = 1;
				this.$emit('handleSizeChange', val);
			},
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {

		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.pagination {
		margin: 20px 0;
		text-align: center;
	}
</style>
