组件传值方式

当我们在写很多重复的模块的时候，会觉得重复写部分代码，很麻烦也很浪费时间，那么有没有一种方式来减少代码的书写量呢？有：

子组件：

<template>
	<div class="app">
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["total", "pageSize"],//调用组件的时候传入组件的值
		data() {
			return {
				currentPage4: 1
			}
		},
		created() {//组件被创建的时候触发里面的js执行

		},
		methods: {
			handleSizeChange(val) {
				this.$emit('handleSizeChange', val);//这里的handleSizeChange是相当于@click的方式，只不过是click名字便了而已
			},
			handleCurrentChange(val) {
				this.$emit('handleCurrentChange', val - 1);//val是传给父组件的值，通过handleCurrentChange(val)获得
			}
		}
	}
</script>

<style>
</style>

父组件：

<myPage v-if="show" :pageSize="pageSize" :total="total" @handleCurrentChange="handleCurrentChange"
			@handleSizeChange="handleSizeChange"></myPage><!--调用组件并给定传入的值-->

父组件js：

//更换页数大小后第一次渲染
			async handleSizeChange(val) {//val即是子组件传回来的值
				this.pageSize = val;
				const res = await this.$myaxios('get', {
					sentence: `Select top ${this.pageSize} * from MyUser where id not in(select top ${this.pageId} id from MyUser)`
				}, 'POST')
				this.userList = res;
			},
			//更换页码后渲染
			async handleCurrentChange(val) {
				this.pageId = val;
				var pageSize = val * this.pageSize;
				const res = await this.$myaxios('get', {
					sentence: `Select top ${this.pageSize} * from MyUser where id not in(select top ${pageSize} id from MyUser)`
				}, 'POST')
				this.userList = res;
			},

此段代码是引入了Element-UI组件库，在实现功能之前需要引入该组件库，或自行实现分页功能。此处的查询语句是使用了后台.net web api ，需要有后台支持