vue 父子组件传参简单的分页

父组件
<template>
    <div>
        <h1>展示学生</h1>
        <table border="2">
            <tr>
                <td>学生姓名</td>
            </tr>
            <tr v-for="i in aa">
                <td>{{i.name}}</td>
            </tr>
        </table>
        <!--父组件传值 到子组件 :page_range="page_range"  需要绑定-->
        <!--点击事件中sss 是子组件传过来的参数 当触发点击事件 执行的是子组件里data程序 -->
        <!--点击事件get_pages 后面如果带参数一定是固定的($event)  要不就不写-->
        <zi @sss="get_pages" :page_range="page_range" ></zi>
    </div>
</template>
<script>
    import zi from '@/components/zi'
    export default {
        name: "fu",
        components:{
            zi:zi
        },
        data:function () {
            return{
                // 初始化父组件要传的值   page_range:[],
                page_range:[],
                aa:[],
                num_page:''
            }
        },
        mounted() {
            this.axios({
                url:'/api/a/showstu/',
                data:{},
                method:"get"
            }).then(res=>{
                if (res.data.code==200){
                    this.aa = res.data.message;
                    //获取后台的数据 赋值
                    this.page_range = res.data.page_range

                }
            })
        },
        methods:{
            //定义个形参
            get_pages:function (data) {
                // data.a_page; 相当于 子组件中初始化的页数
                this.num_page = data.a_page;
                this.axios({
                    url: '/api/a/showstu/?p='+this.num_page,  #后台接口
                    data:{},
                    method: 'get'
                }).then(res=>{
                    this.aa = res.data.message;
                    this.page_range = res.data.page_range
                })
            }
        }


    }
</script>

<style scoped>

</style>

子组件

<template>
    <div>
        <!--分页的按钮-->
        <button v-for="i in page_range" @click="get_page(i)">{{i}}</button>
    </div>
</template>

<script>
    export default {
        name: "zi",
        //接收父组件传过来的值
        props:['page_range'],
        data:function () {
            return{
                //首页 假如是1
                a_page : 1,
            }
        },
        methods:{
            //点击事件  带形参
            get_page:function (i) {
                this.a_page = i;// 将形参赋值给 初始化定义的a_page
                var data  = {'a_page':this.a_page}; //定义对象 将定义好的a_page 赋值给data
                this.$emit('sss',data)  //发送给 父组件 带两个参数，sss 随意定义 ，data是被赋值的对象
            }
        }


    }
</script>

<style scoped>

</style>



views.py

# 展示学生
class Showstu(APIView):
    def get(self, request):
        # 获取页数
        num_page = request.GET.get('p')
        stu = Stu.objects.all()  #查出表里所有的数据
        p = Paginator(stu,1)  # stu 一共有的数据，每页显示1条
        page_list=p.get_page(num_page)  #获取当前点击的内容
        page_range = list(p.page_range)  #一共分了多少页
        ser = ShowstuSerializers(page_list, many=True) # 序列化
        return Response({'code': 200, 'message': ser.data,'page_range':page_range})

序列化

class ShowstuSerializers(serializers.ModelSerializer):
    class Meta: 
        model = Stu  #指向的表  所执行的表
        fields='__all__'  #查出全部数据