vue 組件的封裝

時間 2019-11-17

原文原文鏈接

封裝的緣由

首先封裝組件的需求確定是多個地方要用到同一個東西，他們都有公共的地方，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>

//父頁面---調用app

<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>