时间戳

首页 > 解决方案 > 使用 Vue，在多个父组件中使用一个 Pagination 组件的最佳方法是什么？

javascript - 使用 Vue，在多个父组件中使用一个 Pagination 组件的最佳方法是什么？

问题描述

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

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

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

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

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
        }
    });
}

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

标签： javascriptvue.jsvuejs2vue-component

解决方案

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

推荐阅读