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()