パッケージelementUI-ページング-グローバルコンポーネントの登録

この文書では、elementuiのカプセル化、具体的な実装手順、およびカプセル化されたコンポーネントの使用方法について説明します.作業中のプロジェクトのニーズであるelementページングのカプセル化を例にとると、以下は具体的な手順です.
パッケージelementUIコンポーネントの3つのステップ1.パッケージコンポーネント:書き込みサブコンポーネント、すなわちelementUIコンポーネントのパッケージ2.登録コンポーネント:パッケージされたコンポーネントをグローバルに登録する3.使用コンポーネント:パッケージされたコンポーネントを親コンポーネントで使用する
パッケージコンポーネント:サブコンポーネントはどこに書きますか?私のサブコンポーネントの位置srccomponentspaginationpagination.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);//           
  },

私のホームページに来て私のパッケージのその他のコンポーネントを見ることができます(*̄)̄)~~