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

【问题标题】：Using Vue, what is the best way to use a Pagination component in multiple parent components?使用 Vue，在多个父组件中使用分页组件的最佳方法是什么？
【发布时间】：2018-09-25 20:26:47
【问题描述】：

我创建了一个 Vue 分页组件，它将被多个区域用于为不同的内容表启用分页。从该表中，我将以下props 发送到分页组件offset、limit、total 和parent_name。

<pagination v-bind:offset="offset" v-bind:limit="limit" v-bind:total="total" pagination_object="parent_object_name"></pagination>

Pagination 组件有一个 Next 和 Previous 按钮，可以根据传入的 props 适当地启用/禁用。我不确定如何更好地处理 Next 和 Previous 事件的点击事件。我需要将这些事件发送回调用父组件。

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

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

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

created() {
    event_bus.$on('pagination_previous', pagination_object => {
        if (pagination_object === 'my_name') {
            // Perform the action
        }
    }),

    event_bus.$on('pagination_next', pagination_object => {
        if (pagination_object === 'my_name') {
            // Perform the action
        }
    });
}

有没有更好的方法将点击事件发送回调用父级？谢谢！

【问题讨论】：

你为什么不使用this.$emit("pagination_next",yourobject)它比eventBus更容易
是的，这是有道理的。有没有更优雅的方法来知道哪个父级正在使用分页组件而不必使用parent_name？

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

在子组件中尝试使用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>

您不需要将代码放入 created 挂钩，但您必须将 page_prev page_next 添加到您的方法对象中，如下所示：

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

【讨论】：