页面上多个地方需要分页，用vue写了一个分页组件，每个地方从后台获取的数据源还不一样

Question

页面上多个地方需要分页，用vue写了一个分页组件，每个地方从后台获取的数据源还不一样,分页组件如下：

components:{
    'page-bar':{
        data(){
            return {
                all: '', //总页数
        cur: 1,//当前页码
            }
        },
         btnClick: function(data){//页码点击事件
                let _this=this;
        if(data != this.cur){
            this.cur = data 
        };
        _this.search(data-1);
    },
    pageClick: function(){
           let _this=this;
        console.log('现在在'+this.cur+'页');
        _this.search(_this.cur-1);
    },
    computed: {
    indexs: function(){
      var left = 1;
      var right = this.all;
      var ar = [];
      if(this.all>= 5){
        if(this.cur > 3 && this.cur < this.all-2){
                left = this.cur - 2
                right = this.cur + 2
        }else{
            if(this.cur<=3){
                left = 1
                right = 5
            }else{
                right = this.all
                left = this.all -4
            }
        }
     }
    while (left <= right){
        ar.push(left)
        left ++
    }
    return ar
   }
},
template:`<div class="page-bar">
            <ul>
                <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
                <li v-if="cur==1"><a class="banclick">上一页</a></li>
                <li v-for="index in indexs"  v-bind:class="{ 'active': cur == index}">
                    <a v-on:click="btnClick(index)">{{ index }}</a>
                </li>
                <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
                <li v-if="cur == all"><a class="banclick">下一页</a></li>
                <li><a>共<i>{{all}}</i>页</a></li>
            </ul>
        </div>` 
        
    }
}

btnclick和pageclick的search方法用来调用不同的数据分页api，这样如果我在所有地方调用<page-bar><page-bar>的时候调用的就是同一个api，有什么方法能区分下

Answer 1

我想，你是不是想问怎样才能实现每个组件调用不同的api？
其实你在组件里面写的search方法 用this.$emit抛出去并携带页码，让父组件处理api方法即可

// 分页组件
search(pageNo){
    this.$emit('changePage',pageNo)
}

调用的时候

<page-bar @changePage=“changePage”><page-bar>

....
changePage(pageNo){
    // api请求
}