效果图

组件需要的 json 格式

commentList: [  
    {
    id: 1,
    isFirstLevel: 0,
    commentUser: {
        userId: 10086,
        nickName: 'huazizhanye',
        avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/avatat.jpg'
    },
    content: 'my name is huazizhanye',
    createDate: new Date().toLocaleDateString(),
    childrenList: [
        {
        id: 2,
        isFirstLevel: 1,
        commentUser: {
            userId: 10010,
            nickName: 'mqq',
            avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/mqq.jpg'
        },
        targetUser: {
            userId: 10086,
            nickName: 'huazizhanye',
            avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/avatat.jpg'
        },
        content: 'hello huazizhanye',
        createDate: new Date().toLocaleDateString()
        },
        {
        id: 3,
        commentUser: {
            userId: 10086,
            nickName: 'huazizhanye',
            avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/avatat.jpg'
        },
        targetUser: {
            userId: 10010,
            nickName: 'mqq',
            avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/mqq.jpg'
        },
        content: 'hello mqq~',
        createDate: new Date().toLocaleDateString(),
        }
    ]
    },
]

参数介绍

评论列表–参数介绍

评论列表–childrenList具体参数介绍

组件参数介绍

组件的数据处理

::: note
将数据统一交由vuex处理，如模拟当前已经登录的用户信息等
:::

state: {
    // 评论数量
    commentNum: 0,
    // 当前用户信息
    userInfo:{
      userId: 10086,
      nickName: 'huazizhanye',
      avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/avatat.jpg'
    }
}

组件的基本使用

// 引用
import Comment from '@/components/Comment'
// 注册
components: {
    Comment
},
// 初始化vuex 中的数据
import {mapState} from 'vuex'

// 在computed中初始化vuex中的数据
computed: {
    ...mapState({
      // 从vuex里面取评论列表
      commentList: state => state.commentList,
      // 从vuex里面当前用户信息
      userInfo: state => state.userInfo,
      // 评论数量
      commentNum: state => state.commentNum
    })
  }

<!-- 在父组件中使用 -->
<comment
    @doSend="doSend($event)"
    @doChidSend="doChidSend(arguments)"
    :commentList="commentList"
    :commentNum="commentNum"
    :avatar="avatar"
    :placeholder="placeholder"
    :isUseEmoj="true"
    ></comment>

新增一级评论

// 父组件方法的调用
methods: {
    doSend(content) {
      console.log('一级评论发送内容' + content)
      let data = {
        // 评论列表的唯一id
        id: this.commentId++,
        // 一级评论
        isFirstLevel: 0,
        content: content,
        createDate: new Date().toLocaleDateString(),
        commentUser: this.userInfo
      }
      this.$store.dispatch('addCommentLevelOne', data)
    }
  }

// store/index.js

state: {
    // 评论数量
    commentNum: 0,
    // 评论列表
    commentList: []
}
actions: {
    // 添加一级评论
    addCommentLevelOne({commit}, data) {
        commit('__addCommentLevelOne', data)
        // 统计评论数量
        commit('__getCommentNum')
    }
},
mutations: {
    // 添加一级评论
    __addCommentLevelOne(state,data) {
        console.log(data)
        state.commentList.unshift(data)
    },
    // 统计评论数量
    __getCommentNum(state) {
        state.commentNum = state.commentList.length
    }
}

回复二级评论

// 父组件方法的调用
methods: {
    doChidSend(e) {
      console.log(e)
      let data = {
        dataList: {
          // id: parseInt(Math.random()*100000000),
          id: this.commentId++,
          // 二级评论
          isFirstLevel: 1,
          // 暂时写死回复评论的人（使用可替换为评论用户）
          commentUser: {
            label: '大佬',
            userId: 10010,
            nickName: 'mqq',
            avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/mqq.jpg'
          },
          // 回复谁
          targetUser: {
            userId: e[1].userId,
            nickName: e[1].nickName,
            avatar: e[1].avatar,
          },
          content: e[0],
          createDate: new Date().toLocaleDateString()
        },
        // 要回复的id 为了添加评论列表数据
        toCommentId: e[2]
      }
      this.$store.dispatch('addCommentLevelTwo', data)
    }
  }

// store/index.js

state: {
    // 评论数量
    commentNum: 0,
    // 评论列表
    commentList: []
}
actions: {
    // 添加二级评论
    addCommentLevelTwo({commit}, data) {
      commit('__addCommentLevelTwo', data)
    }
},
mutations: {
    // 添加二级评论
    __addCommentLevelTwo(state,data) {
      console.log(state,data)
      if(state.commentList.findIndex(x => x.id === data.toCommentId) !== -1) {
          state.commentList.forEach(items => {
            if(items.id == data.toCommentId) {
              if (items.childrenList) {
                items.childrenList.push(data.dataList)
              } else {
                items.childrenList = []
                items.childrenList.push(data.dataList)
              }
            }
        })
      }
    }
}

至此就结束了，有什么问题，欢迎下方留言~

源码地址

See Github