vue組件通信小demo練習

本次練習是在上次vue組件練習的基礎上增加了分頁和朦層的效果。組件化開發練習文章見地址
先上效果圖：


目錄結構:

在上次的基礎上添加了分頁組件Pager.js和朦層組件Loading.js和Modal.js以及修改了容器組件MovieContainer

在分頁展示過程中,添加了頁碼,當用戶發生點擊事件時,分頁組件獲取到newPage(新頁面),由於不是自己的數據,無法進行修改.這時候觸發事件,將事件扔給父組件MovieContainer.js.父組件收到通知註冊事件來解決問題.

分頁組件Pager.js

var template = `
<div class="pager" v-if = "total>0">
      <a href="" @click.prevent = "handleAClick(1)" class="pager-item " :class = "current ===1 ? 'disabled' : ''">首頁</a> 
      <a href="" @click.prevent = "handleAClick(current - 1)" class="pager-item  " :class = "current ===1 ? 'disabled' : ''">上一頁</a>
       <span class="pager-text">
            <i>{{ current }}</i>
                  /
            <i>{{ pageNumber }}</i>
       </span>
        <a href="" @click.prevent = "handleAClick(current + 1)" class="pager-item" :class = "current ===pageNumber ? 'disabled' : ''">下一頁</a> 
        <a href="" @click.prevent = "handleAClick(pageNumber)" class="pager-item" :class = "current ===pageNumber ? 'disabled' : ''">尾頁</a>
</div>
`;
export default {
  computed: {
    //總頁數
    pageNumber(){
      return Math.ceil(this.total/this.limit);
    }
  },
  props:{
    current:{  
      //當前頁碼
      default: 1,
      type:Number,
    },
    total:{   
      //總的數據量
      default: 0,
      type: Number
    },
    limit:{
      //頁容量：每頁顯示多少條數據
      default: 10,
      type:Number
    }
  },
  methods: {
    handleAClick(newPage){
        if(newPage < 1 || newPage > this.pageNumber || newPage == this.current){
          return;
        }
        //自己無法處理，將事件扔出去
        this.$emit("page-change",newPage)
    }
  },
  template
};

父組件MovieContainer.js

//該組件僅用於獲取電影數據

import MovieList from "./MovieList.js";
import movieService from "../service/movieService.js";
import Pager1 from "./Pager1.js";
import Loading from "./Loading.js"
var template = `
  <div>
    <MovieList :movies="movies"/>
    <Pager1 :total = "total" :limit = "limit" :current = "page" @page-change = "handlePageChange"/>
    <Loading :isShow = "isLoading"/>
  </div>
`;

export default {
  components: {
    MovieList,
    Pager1,
    Loading
  },
  data() {
    return {
      movies: [],
      total: 0, //總數據量
      limit: 3, //頁容量
      page: 1, //當前頁碼
      isLoading:false  //是否正在遠程加載數據
 
    };
  },
  async created() {
    //獲取電影數據
    this.getMovies();
  },
  methods: {
    handlePageChange(newPage){
      this.page = newPage;
      this.getMovies();

    },
    async getMovies(){
      this.isLoading = true;
      var resp = await movieService.getMovies(this.page,this.limit);
    this.movies = resp.data;
    this.total = resp.count;
    this.isLoading = false;
    }
  },
  template
};

朦層組件
Loading.js

import Modal from "./Modal.js";

var template = `
  <Modal v-if="isShow">
    <div class="loading">加載中...</div>
  </Modal>
`;

export default {
  components:{
    Modal
  },
  props: {
    isShow: {
      default: false,
      type: Boolean
    }
  },
  template
};

Modal.js

var template = `
  <div class="modal">
    <div class="center">
      <slot>默認的顯示</slot>
    </div>
  </div>
`;

export default {
  template
};