Vue（三十）公共组件

以 分页 组件为例：（根据本身具体业务编写）

1.pagination.vue

<template>
  <!-- 分页 -->
  <div class="table-pagination" v-if="flag">
    <template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="totalCount"
          layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'my-pagination',
  props: {
    flag: Boolean,
    page: Number,
    pageSize: Number,
    totalCount: Number
  },
  methods: {
    handleSizeChange (val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

 

2.新建一个utils文件夹，而后新建一个global.js

/*
** 公共组件
*/

import Pagination from '../components/common/pagination/Pagination.vue'

const global = (Vue) => {
  if (global.installed) return
  Vue.component('my-pagination', Pagination) // 注册全局分页组件
}

export default global

 

3.在main.js中引入js

import Global from './utils/global'

Vue.use(Global) // 注册全局组件

 

4.直接在页面中引入

<my-pagination
          @handleSizeChange='handleSizeChange'
          @handleCurrentChange='handleCurrentChange'
          :flag='flag'
          :page='page'
          :pageSize='pageSize'
          :totalCount='totalCount'>
        </my-pagination>