Javascript 使用Vue，在多个父组件中使用分页组件的最佳方式是什么？

我创建了一个Vue分页组件，多个区域将使用该组件为不同的内容表启用分页。从该表中，我将以下

道具

发送到分页组件

偏移量

，

限制

，

总计

和

父项名称

分页组件有一个“下一步”和“上一步”按钮，根据进入的道具适当地启用/禁用该按钮。我不确定如何更好地处理下一个和上一个事件的单击事件。我需要将这些事件发送回调用父组件

目前，我正在使用事件总线发送单击事件，并传入父对象名称，以区分正在使用的父对象

方法：{
前（）{
event_bus.$emit（'pagination_previous'，this.pagination_对象）；
},
下一个（）{
event_bus.$emit（'pagination_next'，this.pagination_对象）；
}
}

然后在父对象中，我监听这些事件并查看父对象名称是否匹配

created（）{
事件_总线.$on（'pagination_previous'，pagination_object=>{
如果（分页对象==='my_name'）{
//执行动作
}
}),
事件_总线.$on（'pagination_next'，pagination_object=>{
如果（分页对象==='my_name'）{
//执行动作
}
});
}

---

是否有更好的方法将单击事件发送回调用的父级？谢谢

在子组件中，尝试使用

this.$emit（…）

函数向父组件发送事件和其他所需参数：

  methods: {
      previous() {
      this.$emit('pagination_previous', this.pagination_object);
      },
      next() {
        this.$emit('pagination_next', this.pagination_object);
      }
   }

在父组件中，通过添加

pagination_previous

和

pagination_next

事件调用子组件，无需

parent_object_name

属性：

<pagination v-bind:offset="offset" v-bind:limit="limit" v-bind:total="total"  v-on:pagination_previous="page_prev" v-on:pagination_next="page_next"></pagination>

---

为什么不使用

this.$emit（“pagination_next”，yourobject）

这比

eventBus

简单是的，这很有意义。是否有一种更优雅的方法可以知道哪个父级正在使用分页组件，而不必使用

父级名称

？

  methods:{
     page_prev(pagination_object){
      //todo
    },
    page_next(pagination_object){
      //todo
    }
  ...
 }