Encapsulation and calling of Vue components

I use a pagination component to analyze

First, create a new page.vue file, as a sub-component, write the label style as required, my path is src/components/page.vue

Set props in the child component to receive the value passed by the parent component. Here I set two values, one totalCount is used to receive the total number of pages, and one input is used to receive the current page number

props:['totalCount','input'],

The totalCount value passed by the parent component does not need to be processed in the child component, so it can be called directly in the child component

<span style="margin-left:10px;">共 {
   
   {totalCount}} 页</span>

 The input value needs to be processed in the sub-component, so you need to declare a variable in the sub-component to receive it, use the watch function to monitor the input value from the parent component, and operate the declared variable in the sub-component. The reason for this is , you can take a look at the prop of the official Vue document

 For the method bound on the child component, you can use $emit(event, params) to monitor, event is the method in the parent component, and params is the passed parameter

<el-input v-model="page" @blur="handleChangeSize(page)"></el-input>

handleChangeSize(input){
	this.$emit('pageSize',input)
},

The specific code is as follows:

Subassembly

<template>
	<div class="page">
		<i class="el-icon-caret-left" title="上一页" @click="prev"></i>
		<span>第<el-input v-model="page" @blur="handleChangeSize(page)"></el-input>页</span>
		<span style="margin-left:10px;">共 {
   
   {totalCount}} 页</span>
		<i class="el-icon-caret-right" title="下一页" @click="next"></i>
	</div>
</template>

<script>
	export default{
		name:'page',
		props:['totalCount','input'],
		data() {
			return {
				page:this.input
			}
		},
		methods:{
			handleChangeSize(input){
				this.$emit('pageSize',input)
			},
			//上一页
			prev(){
				if(this.page>1){
					this.page--
				}else{
					this.$message('这是首页哦！')
					return false
				}
				this.$emit('pageSize',this.page)
			},
			//下一页
			next(){
				if(this.page<this.totalCount){
					this.page++
				}else{
					this.$message('这是最后一页哦！')
					return false
				}
				this.$emit('pageSize',this.page)
			}
		},
		watch: {
			input(val) {
				this.page = val;
			}
		},
	}
</script>

<style lang="scss">
	.page{
		i{
			font-size: 20px;
			vertical-align: middle;
			color: #007DB5;
			cursor: pointer;
		}
		.el-input{
			width: 80px;
			margin:0 8px;
			.el-input__inner{
				height: 30px;
				text-align: center;
			}
		}
	}
	
</style>

parent component 

<template>
	<div class="searchList">
	    <Page :totalCount="totalCount" :input="currentPage" v-on:pageSize="changPageSize"></Page>		
	</div>
</template>

<script>
	import Page from "../../components/page.vue"
	export default{
		name:'searchList',
		components: {
			Page
		},
		data() {
			return {
				totalCount:1000,//数据总条目数
				currentPage:1,//当前页
			}
		},
		methods:{
        ...数据处理
            changPageSize(){
              ...数据处理  
            },
		}
	}
</script>

<style lang="scss">
	
</style>