vue子组件

我就是我 2022-01-07 05:57 258阅读 0赞

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>