[前端暴龙机，Vue2.x 进化 Vue3 ] Day18.组件练习-分页(一)

组件的部份因为有比较复杂，所以会做个小练习来熟悉一点 - 分页的组件

分页组件(props & $emit 运用)

快速利用简单的分页组件范例来写个小练习吧

  需求:
   1. 分页组件会有上一页、下一页以及总共的各页数按钮可以点击
   2. pageSize、pageIndex、pageCount、itemCount 由父组件传送过来
   

先定义好子组件

Vue.component('page-component', {
    template: `
        <div>
            <button type="button" @click="prev">上一页</button>
            <button :class="{pagenow: pageIndex === item}" type="button" v-for="item in pageCount" @click="pageToIndex(item)">{{ item }}</button>
            <button type="button" @click="next">下一页</button>
        </div>
    `,
    props: ['pageSize', "pageIndex", "pageCount", "itemCount"], //使用`props`声明它所获得的资料
    data: function () {
        return {
            pageIdx: 0
        }
    },
    mounted() {
        // 接收资料後更新当前的页数
        this.setPage(this.pageIndex);
    },
    methods: {
        prev() {
            if (this.pageIndex <= 1) return;
            
            // 因为不能拿 父层的 pageIndex 做运算，所以用子组件拷贝过来的 pageIdx 运算
            this.pageIdx--;
            
            // 回传资料给父层，告知前一页页数该为多少
            this.$emit("uplist", this.pageIdx);
        },
        next() {
            if (this.pageIndex === this.pageCount) return;
            this.pageIdx++;
            
            // 回传资料给父层，告知下一页页数该为多少
            this.$emit("uplist", this.pageIdx);
        },
        setPage(p) {
        
            // 同步父层的 pageIndex
            this.pageIdx = p;
        },
        pageToIndex(p){
        
            // 回传资料给父层，告知直接跳转至该页数
            this.$emit("uplist", p);
        }
    },
});

在子组件中，因为不能直接去动父组件传送过来的资料 pageIndex，所以我这边会定义一个 pageIdx 来跟父层的 pageIndex 同步，也方便其他地方做运算的需求

因为要让当前页数 pageIndex 符合在总范围页数内，所以在上一页、下一页触发的事件中，就可以用 pageIdx 做运算後(上面提到 不能直接去动父组件传送过来的资料)，传送预期的页数(pageIndex)给父层

父组件编辑

首先，建立好模板及 props

<div id="app">
  <ul>
      <li v-for="item in renders">{{ item.text }}</li>
  </ul>
  <page-component :page-size="pageSize" :page-index="pageIndex" :page-count="pageCount"
      :item-count="itemCount" @uplist="newlist"></page-component>
</div>

再来，处理假资料的渲染及接收子组件的讯息处理

<script>
var app = new Vue({
  el: '#app',
  data:{
    pageIndex: 1,
    pageCount: 3,
    itemCount: 6,
    pageSize: 2,
    datas: [
        { id: 1, text: "1111" },
        { id: 2, text: "2222" },
        { id: 3, text: "3333" },
        { id: 4, text: "4444" },
        { id: 5, text: "5555" },
        { id: 6, text: "6666" },
    ]
  },
  computed:{
    renderData(){
    
      // 运用 computed 处理资料 filter 方法
      if (this.pageIndex === 1) {
          return this.datas.filter(ele => ele.id <= 2);
      }
      if (this.pageIndex === 2) {
          return this.datas.filter(ele => ele.id > 2 && ele.id <= 4);
      }
      if (this.pageIndex === 3) {
          return this.datas.filter(ele => ele.id > 4 && ele.id <= 6);
      }
    }
  },
  methods:{
      newlist(e) {
          
          // 接收到子组件讯息後的处理
          this.pageIndex = e;
      }
  }
})
</script>

父层的当前页数资料渲染，透过先前提及的 computed 做处理，方便当条件变更时，自动更新渲染资料，做换页的动作(模拟後端丢资料)

接着定义当收到子组件传来的讯息时应该要做的动作 newlist function()，就完成啦~

范例展示