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__'  #查出全部數據