Question

我创建了一个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>

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

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

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

是否有更好的方法将点击事件发送回给主叫方？谢谢！

Answer 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
    }
  ...
 }

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

1 个答案: