vue 组件的封装

封装的原因

首先封装组件的需求肯定是多个地方要用到同一个东西，他们都有公共的地方，vue的封装 简单来说就是将公共参数封装起来 然后在需要的地方引入

//子组件封装

<template>
  <div class="pagination-wrapper">
    <el-pagination
      :background="background"
      align="right"
      @current-change="currentChange"
      @size-change="sizeChange"
      :page-size="pageSize"
      :page-sizes="[10,20,30]"
      :current-page="currentPage"
      :layout="layout"
      :total="total"
      :page-count="pageCount"
    >
      <div class="tip">
        <span>共{{pageCount}}页</span>
        <span>共{{total}}条记录</span>
      </div>
    </el-pagination>
  </div>
</template>

<script>
/**
 * 分页组件
 * @props total 总记录数
 * @props pageCount 总页数
 * @props currentPage 当前页码
 * @props pageSize 每页记录数
 * @methods handle(currentPage, pageSize) 当前页码和每页条数
 */
export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageCount: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 1
    },
    layout: {
      type: String,
      default: "sizes, prev, pager, next, slot, jumper"
    }
  },
  data() {
    return {
      background: true,
    };
  },
  watch: {
  },
  computed:{
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      //  console.log(this.currentPage)
    });
  },
  methods: {
    // 分页
    currentChange(val) {
      this.$emit("handle", val, this.pageSize);
    },
    sizeChange(val) {
      this.$emit("handle", this.currentPage, val);
    }
  }
};
</script>

<style scoped lang="less">
.pagination-wrapper {
  padding: 20px 0;
  background: #fff;
  .tip {
    display: inline-block;
    font-weight: normal;
    span {
      margin: 0 10px;
    }
  }
}
</style>

//父页面---调用

<template>
	<div class='pagination-default'>
		<com-pagination @handle="pageChange" :total="total" :page-size="pageSize" :current-page.sync="pageNum" :page-count="pageTotal"></com-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				total: 0, // 总记录数
				pageSize: 10, // 每页记录数
				pageNum: 1, // 当前页码
				pageTotal: 0, // 总页数
				tableData: [],
				totalData: "",
			}
		},
		mounted(){
		},
		methods: {
				pageChange(currentPage, pageSize) {
				this.pageNum = currentPage;
				this.pageSize = pageSize;
			},
		}
	}
</script>

<style scoped lang="less">

</style>

遇到的性能优化的问题

这里。我之前遇到一个坑，我一般都是直接封装成公共组件，但是公共组件 在项目初始化的时候就都调用了 所以。加载的时候特别慢，这就需要。你单独引入。不能直接定义成全局的