使用 Vue，在多個父組件中使用 Pagination 組件的最佳方法是什么？

Question

我創建了一個 Vue Pagination 組件，它將被多個區域用於為不同的內容表啟用分頁。 從那個表中，我將以下props發送到 Pagination 組件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 按鈕，它們根據傳入的道具適當地啟用/禁用。我不確定如何更好地處理 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
        }
    });
}

有沒有更好的方法將點擊事件發送回調用父級？ 謝謝！

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