简易 Vue 评论框架的实现————父组件的实现

最近看到一个需求：

1. 实现一个评论功能，要求对评论列表进行分页显示

2. 对相应模块实现组件化

3. 能显示发布者、发布时间以及内容

乍一看不是很难，但是在具体的实现上还是遇到了一些问题。此外，因为第一次使用 vue ，看文档看的也是一脸懵逼，话不多说，下面来分析一下，具体每个模块是怎么实现的。

源码地址

评论表单代码：

<!-- 文档结构区开始 -->
<template>
    <div id="comment" >
        <UserDiv @transferUser="getInput" ></UserDiv>
        <CommentDiv :List="List"></CommentDiv>
        <PageDiv @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></PageDiv>
    </div>
</template>
<!-- 文档结构区结束 -->

<!-- js 控制区开始 -->
<script>
//引入组件 commentInput、commentList、pagination
import UserDiv from './commentInput.vue'
import PageDiv from './pagination.vue'
import CommentDiv from './commentList.vue'

export default {
    //声明组件名
    name: 'comment',

    //包含实例可用组件的哈希表
    components: {
        UserDiv,
        PageDiv,
        CommentDiv
    },

    //声明组件参数
    data() {
        return {
            totalCount: 0,
            currentPage: 1,
            pagesize: 3,
            totalData: [],
            List: [],
        }
    },

    methods: {
        //显示评论列表信息的方法
        getInput(msg) {
            //将评论信息保存到评论数组里
            this.totalData.push({ text: msg })
            //计算评论信息总条数长度
            this.totalCount = this.totalData.length

            //判断评论总数是否大于单页显示条数
            if (this.totalCount <= this.pagesize) {
              // 显示所有评论
              this.List = this.totalData
            } else {
              // 截取totalData中 this.totalCount - this.pagesize 后面的元素进行显示
              this.List = this.totalData.slice(this.totalCount - this.pagesize)
            }
            //点击评论按钮，默认跳转显示第一页内容
            this.currentPage = 1
            //评论列表倒序显示，即最新评论，显示在最上面
            this.List.reverse()

        },

        // 计算评论列表每一页的显示内容
        getPage(curr, size) {
            this.currentPage = curr

            if (this.totalCount <= this.pagesize) {
                //显示所有评论
                this.List = this.totalData
            } else {
                var start = this.totalCount - this.currentPage * this.pagesize
                if (start < 0) { start = 0 }
                // 截取totalData中 [start, start + this.pagesize] 位元素进行显示
                this.List = this.totalData.slice(start, start + this.pagesize)
            }
            //评论列表倒序显示，即最新评论，显示在最上面
            this.List.reverse()
        }
    },
}
</script>
<!-- js 控制区结束 -->
复制代码

本文章来源于午安煎饼计划Web组 - 初见

相关链接：

每日源码分析-Lodash(castArray.js)

每日源码分析-Lodash(after.js)

每日源码分析 – lodash(slice.js)