如题，做了一个分页功能，element里面的分页，已经有了页码改变、每页数量改变的change事件，这样如果当页码改变、每页数量改变的时候，又要在methods里面写change来根据改变的值来获取分页，这样就很麻烦，如果没个页面都有分页，这样就要在methods里面多写change事件。
想到了一个解决方法，就是把element的分页封装成一个组件，具体思路如下：

一、子组件：

1.这个绑定了每页数量改变的事件，

handleSizeChange

handleSizeChange(index) {
      this.query.length = index
    },

2.这个绑定了当前页码改变的事件

handleCurrentChange

handleCurrentChange(index) {
      console.log(index)
      this.query.start = index
    }

3.最重要的数据，这里是当前页码和每页数量，

query: {
        start: 1,
        length: 10
      }

4.页码跟数量改变是在子组件中完成的，写个watch，然后实时把query传递给父组件

watch: {
    query: {
      handler(val, oldVal) {
        this.$emit('changeData', this.query)
      },
      deep: true
    }
  },

5.完整子组件代码

<template>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="query.start"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="query.length"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    size: {
      type: Number,
      default: function() {
        return 10
      }
    },
    total: {
      type: Number,
      default: function() {
        return 10
      }
    },
    start: {
      type: Number,
      default: function() {
        return 1
      }
    }
  },
  created() {
    this.query = {
      start: this.start,
      length: this.size
    }
  },
  data() {
    return {
      query: {
        start: 1,
        length: 10
      }
    }
  },
  watch: {
    query: {
      handler(val, oldVal) {
        this.$emit('changeData', this.query)
      },
      deep: true
    }
  },
  methods: {
    handleSizeChange(index) {
      this.query.length = index
    },
    handleCurrentChange(index) {
      console.log(index)
      this.query.start = index
    }
  }
}
</script>

<style scoped>

</style>

二、父组件

1.先引入组件，组件位置根据自己的而定

import pagination from '../../components/table-pagination/pagination'

2.然后注册组件

components: { pagination },

3.使用组件

<pagination
          :size="query.length"
          :total="total"
          :start="query.start"
          @changeData="getList($event)"
          />

组件传递的参数：


4.如何获取子组件传递过来的query对象？
1）父组件获取
注意：
这里的changeData跟子组件中$emit发送的地方要相同！

2）子组件部位
注意：this.$emit('changeData',this.query)
changeData就是父组件中子组件部位注册的自定义事件，this.query就是要传递的值

3）我的获取分页的函数就是getList（query），直接在自定义事件中写@changeData="getList($event)"

三、大功告成

这样每当子组件中query的值改变之后，父组件都会执行分页查询请求，就可以实时更新了！

后记：自定义事件，可以做很多事情，比如，点击子组件按钮，传递参数，然后父组件使用这个参数来做什么事情，当整个页面的数据量、逻辑实在是太庞大的时候，就可以把整个也面分成一个个小组件来，这样就不会显得页面庞大复杂了…