封装elementUI-分页器-注册全局组件

本文将介绍如何封装elementui,具体的实现过程，以及如何使用封装过的组件。以我在工作中的项目需要–封装element分页器为例，以下是具体过程。

封装elementUI组件一共3个步骤
1.封装组件：写子组件，也就是对elementUI组件进行封装
2.注册组件：本文是将封装过的组件进行全局注册
3.使用组件：在父组件对封装过的组件进行使用

封装组件：
子组件写在哪？我的子组件位置
src\components\pagination\pagination.vue
组件放的位置只要main.js能引用到就行
各种参数都有注释，使用时看看子组件的注释就好啦

<template>
  <el-pagination
    background
    :layout="layout"
    :page-sizes="pageSizes"
    :total="total"
    :current-page="currentPage"
    @size-change='handelSizeChange'
    @next-click="handelPageChange"
    @prev-click="handelPageChange"
    @current-change="handelPageChange"
    >
  </el-pagination>

</template>

<script>
    export default { 
      props:{ //接收从父组件
        pageSizes:{//分页器的每页显示XX条，非必传，若不传就显示默认条数
          type:Array,//Array/Object必须使用工厂函数来返回一个值
          required:false,
          default() {
            return [10, 50, 100, 150, 200];
          },
        },
        layout:{//组件布局，非必传，字符串格式，用逗号分隔，若不传就显示默认组件布局
          type:String,
          required:false,
          default:"total, sizes, prev, pager, next, jumper"
        },
        total:{//总条数，非必传，数字格式，若不传总条数为默认值
          type:Number,
          required:false,
          default:0
        },
        currentPage:{//当前页，非必传，数字格式，若不传当前页为默认值
          type:Number,
          required:false,
          default:1
        },
    },
    data() {
      return { 
      }
    },  
    methods: { 
      // 每页条数
      handelSizeChange(val) {
        console.log('handelSizeChange',val)
        //触发父组件事件
        this.$emit('size-change',val);//父组件事件名@size-change
      },


      // 翻页
      handelPageChange(page) {
        console.log('handelPageChange',page)
        //触发父组件事件
        this.$emit('page-change',page);//父组件事件名@page-change
      },
        
    },


    mounted() { 
    },
    created() { 
      console.log('i am pagination component')
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

注册组件：

main.js中全局注册，这样以后任何页面都可以像elementui一样直接使用：

import pagination from '@/components/pagination/pagination.vue'
Vue.component('pagination',pagination)

使用组件
在父组件中就可以使用刚刚封装过的组件啦！

        <pagination 
          :total="allpage"
          :currentPage="currentPage"
          @size-change='handelSizeChange'
          @page-change='handelPageChange'
        ></pagination>

  handelPageChange(i) {
    this.currentPage = i;//当前页
    this.handlClickSearchList(i, this.defaultSize);//这是我的请求数据的方法
  },
  handelSizeChange(val) {
    this.defaultSize = val;//默认显示条数
    this.currentPage = 1;//当前页
    this.handlClickSearchList(1, val);//这是我的请求数据的方法
  },

可以来我的主页看我封装的其他组件(*￣︶￣)~~