vue子组件

 

 

1、父组件引用

<template>
<MyPagination  :total="total1" :pageNum="pageNum1" :pageSize="pageSize1" @handlePageNum="handlePageNum1" @handlePageSize="handlePageSize1"></MyPagination>
</template>

<script>
import MyPagination from '@/components/MyPagination';
export default {
components: {   
    MyPagination
},
data(){
return{
 total1: 0,
 pageSize1: 10,
 sizeOpt: [10, 20, 30],
}
},
methods:{

handlePageNum1(data) {
    this.pageNum1 = data
    this.searchList1()
},
handlePageSize1(data) {
    this.pageSize1 = data
    this.searchList1()
},
}

}
</script>

 

 

2、子组件

<template>
    <Page v-if="total==0" class="paginationPage" placement="top" :total="total" show-total show-sizer :current="pageNum"
          :page-size-opts="sizeOpt" @on-change="handlePageNum"
          @on-page-size-change="handlePageSize"></Page>
</template>
<script>
    import { Modal, Cascader,Spin } from 'iview'
    export default {
        components: { Modal, Cascader},
        props: {
            showPagination:{
                type: Boolean,
                default: true
            },
            total: {
            },
            pageNum: {
            },
            pageSize: {
            },
            sizeOpt:[Array]
        },
        name: "MyPagination",
        data () {

            return {
                // canAdd:true,
                // active: false,
                // modal: false,
                // modalCus: false,
                // showPagination:true,
                // total: 0,
                // pageNum: 1,
                // sizeOpt: [10, 20, 30],
            }
        },
        created () {

        },
        methods: {
            init () {

            },
            handlePageNum (data) {
                this.$emit('handlePageNum',data);
            },

            handlePageSize(data) {
                this.$emit('handlePageSize',data);
            },
        }
    }
</script>
<style lang="less">
    .paginationPage {
        float: right;
        margin-top: 24px;
    }
</style>