Creating a pagination component emits click events to parent

In this tutorial, we will have a look at how we can propagate events back to parent component from the child.

<template>
    <nav v-if="pageCount > 1"> 
        <ul class="pagination" v-bind:class="cssClass">
            <li class="page-item" v-bind:class="[{ 'disabled': page == 1 }]"><a class="page-link" href="#" @click="onClicked(1)" title="Go to first page" ><span class="ti-arrow-left"></span></a></li>
            <li class="page-item" v-bind:class="[{ 'active': page == i }]" v-for="i in pageCount" :key="i"><a class="page-link" href="#" @click="onClicked(i)" v-bind:title="'Go to page ' + i">{{i}}</a></li>
            <li class="page-item" v-bind:class="[{ 'disabled': page == pageCount }]"></li><a class="page-link" href="#" @click="onClicked(pageCount)" title="Go to last page"><span class="ti-arrow-right"></span></a></li>
        </ul>   
    </nav>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
@Component({
  props: {
    page: Number,
    pageCount: Number,
    itemCount: Number,
    cssClass: String
  }
})
export default class PaginationComponent extends Vue {
  created() {}
  private onClicked(page: number) {
    this.$emit("click", page);
  }
}
</script>

Below is the parent component of child component.

<template>
   <div class="col-lg-12">
        <!-- any other htmls looping list-->
        <Pagination :cssClass="'justify-content-center'" :page="result.Page" :pageCount="result.PageCount" @click="onPaginationClick" ></Pagination>
   </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import Pagination from "../../shared/Pagination.vue";
import { userService } from "../../../services/UserService";
import { IRestResponse, IUser, PaginatedResult, IPaginatedResult } from "../../../shared/models";

@Component({
  components: {
    Pagination   
  }
})
export default class ProjectListComponent extends Vue {  
  defaultPage: number = 1;
  result: IPaginatedResult<IUser> = { ItemCount: 0, Items: [], Page: 0, PageCount: 0, PageSize: 0 };

  created() {
    this.loadData(this.defaultPage);
  }
  private loadData(page: number) {
    this.showLoading = true;
    userService
      .getPaged(page, AppSettings.PageSize)
      .then((response: IRestResponse<IPaginatedResult<IUser>>) => {
        this.showLoading = false;
        if (!response.is_error && response.content) {
          this.result = new PaginatedResult<IProject>(response.content);
        } else {
          // show error
        }
        
      })
      .catch(error => {
        // show error
      });
  }

  private onPaginationClick(page: number) {
    this.loadData(page);
  }
}
</script>