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