I have developed a Vue Pagination component for enabling pagination in various content tables. To implement this, I pass the following props - offset, limit, total, and parent_name to the Pagination component.
<pagination v-bind:offset="offset" v-bind:limit="limit" v-bind:total="total" pagination_object="parent_object_name"></pagination>
The Pagination component includes Next and Previous buttons that respond dynamically based on the passed props. However, I am unsure about the best approach to handle the click events for these buttons and transfer them back to the parent component.
Currently, my solution involves using an event bus to transmit the click events while also specifying the parent object's name.
methods: {
previous() {
event_bus.$emit('pagination_previous', this.pagination_object);
},
next() {
event_bus.$emit('pagination_next', this.pagination_object);
}
}
In the parent components, I listen for these events and check if the parent object's name matches.
created() {
event_bus.$on('pagination_previous', pagination_object => {
if (pagination_object === 'my_name') {
// Perform desired action
}
}),
event_bus.$on('pagination_next', pagination_object => {
if (pagination_object === 'my_name') {
// Perform desired action
}
});
}
Is there a more efficient method to relay the click events back to the calling parent component? Thank you!