vue实现分页器进行数据交互


子组件





父组件给子组件传递数据(模拟数据)

   <Pagination
            :pageNo="searchParams.pageNo"
            :pageSize="searchParams.pageSize"
            :total="91"
            :continues="5"
            @getPageNo="getPageNo"
          >

父组件在想请求数据时候的一些信息

 data() {
    return {
      //带给服务器的参数
      searchParams: {
        pageNo:1, //默认在第几页
        pageSize: 3, //每页几条数据
      },
    };
  },

通过自定义事件,整理传递的参数,然后再请求数据

  //获取当前第几页
    getPageNo(pageNo){
        // console.log(pageNo)
        //整理给服务器的参数
        this.searchParams.pageNo=pageNo;
        this.getData()
    },