vue父子组件传参实现分页

后端用的是django的paginator分页模块

分页流程

1. 嵌套组件，分页组件注册在主组件中
2. mounted钩子函数先请求到第一页的数据，当前页，页数范围，最大页数，传给子组件，子组件渲染
3. 其中，子组件定义了四个按钮（首页，尾页，上一页，下一页）。当调用上一页下一页函数时，当前页数计算过后，通过$emit传给父组件，在下面的例子中调用了chane_page_num映射函数，父组件函数请求当前页数据；当调用首页尾页时，给当前页赋值，1或最大页数，同样传给父组件调用映射函数，获取到当前页数据。当前页为首页或尾页时return。
4. 这里需要注意的是父组件给子组件传数据用preps，子组件给父组件传值用$emit。

代码实现

// vue父组件
<template>
  <div>
    <li v-for="p in product">{{ p.name }}li>
    <Fy :aaa="page_range" :total_page="total_page" @change_page_num="get_page_num">Fy>
  div>
template>

<script>
import axios from "axios";
import Fy from "@/components/Fy";
export default {
  data() {
    return {
      page_range: new Array(),
      current_page: 1,
      product: new Array(),
      total_page:1
    };
  },
  components: {
    Fy
  },
  mounted() {
    axios({
      url: "http://127.0.0.1:8000/",
      method: "get"
    }).then(res => {
      this.product = res.data.data; 
      this.current_page = res.data.current_page
      this.page_range = res.data.page_range
      this.total_page = res.data.total_page
    });
  },


  methods: {
    get_page_num(data) {
      // data-> this.$emit('change_page_num', data)
      this.current_page = data.current_page;
      axios({
        url: "http://127.0.0.1:8000/?page_num=" + this.current_page,
        method: "get"
      }).then(res => {
        this.product = res.data.data;
        console.log(res.data)
      });
    }
  }
};
script>

// 子组件
<template>
    <div>
        <button @click="get_num(1)">首页button>
        <button @click="sub_page_num">上一页button>
        <button v-for="num in aaa" @click="get_num(num)">{{ num }}button>
        
        <button @click="add_page_num">下一页button>
        <button @click="get_num(total_page)">尾页button>
    div>
template>

<script>
export default {
    data() {
        return {
            current_page: 1,
        }
    },
    props: ["aaa","total_page"],
    mounted(){
        // console.log(1,this.num_pages)
    },
    methods: {
        sub_page_num(){
            if(this.current_page == 1){
                // 就已经是首页了
                return 
            }
            this.current_page -= 1
            let data = {
                current_page: this.current_page
            }
            this.$emit('change_page_num', data)
            // 子组件向父组件传参
        },
        add_page_num(){
            if(this.current_page == this.total_page){
                // 就已经是首页了
                return 
            }
            this.current_page += 1
            let data = {
                current_page: this.current_page
            }
            this.$emit('change_page_num', data)
            // 子组件向父组件传参
        },
        get_num(num){
            this.current_page = num
            let data = {
                current_page: this.current_page
            }
            this.$emit('change_page_num', data)
            // 子组件向父组件传参  
        }
    },
}
script>

后台

class Productserializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = ('__all__')
from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage
class Getproduct(APIView):
    def get(self,request):
        page = request.query_params.get('page_num')
        if not page:
            page =1

        p_all = models.Product.objects.all()
        p = Paginator(p_all,2)

        try:
            p_data = p.get_page(page)
        except PageNotAnInteger:
            p_data = p.get_page(1)
        except EmptyPage:
            p_data = p.get_page(1)

        #总页数
        total_page = p.num_pages
        # 页数范围
        page_range = p.page_range

        p = Productserializer(p_data,many=True)
        return Response({
            'code':1,
            'current_page':page,
            'total_page':total_page,
            'page_range':list(page_range),
            'data':p.data
        })

实现效果