Vue 코멘트 프레임워크 구현에 대해(상위 컴포넌트 구현)

이 글은 주로 간단한 Vue 댓글 프레임워크 구현(상위 컴포넌트 구현)을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

최근 요구 사항을 확인했습니다.

1. 페이지에 댓글 목록이 표시되도록 댓글 기능을 구현합니다.

2. 해당 모듈의 구성 요소화를 구현합니다.

3. 게시자, 게시 시간 및 콘텐츠를 표시합니다.

얼핏 보면 어렵지 않아 보이지만 구체적인 구현에는 여전히 몇 가지 문제가 있습니다. 그리고, vue를 처음 사용하기 때문에 설명서를 읽어보면 헷갈릴 수 있으니, 더 이상 고민하지 말고 각 모듈이 어떻게 구현되어 있는지 분석해 보도록 하겠습니다.

소스 코드 주소

댓글 양식 코드:

<!-- 文档结构区开始 -->
<template>
  <p id="comment" >
    <Userp @transferUser="getInput" ></Userp>
    <Commentp :List="List"></Commentp>
    <Pagep @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></Pagep>
  </p>
</template>
<!-- 文档结构区结束 -->

<!-- js 控制区开始 -->
<script>
//引入组件 commentInput、commentList、pagination
import Userp from &#39;./commentInput.vue&#39;
import Pagep from &#39;./pagination.vue&#39;
import Commentp from &#39;./commentList.vue&#39;

export default {
  //声明组件名
  name: &#39;comment&#39;,

  //包含实例可用组件的哈希表
  components: {
    Userp,
    Pagep,
    Commentp
  },

  //声明组件参数
  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 控制区结束 -->

위 내용은 모두의 학습에 도움이 되기를 바랍니다.

관련 권장 사항:

Vue는 backToTop 구성 요소를 구현합니다.

VUE 지역 선택기(V-Distpicker) 구성 요소 사용 소개

위 내용은 Vue 코멘트 프레임워크 구현에 대해(상위 컴포넌트 구현)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!