从零实现评论组件

首先说一下，本篇不会涉及到大量实现代码，包含大量图片以及伪代码。

分析结构

拿到一个需求，一开始不要着急去动手，在没想清楚前就动手容易返工；那我们先分析下评论组件的整体结构是什么样的。这里就参考下🍉视频跟B站的吧。

大大小小的评论结构上基本一致；评论的主体人(用户)、评论内容(文本、图片、表情等)、评论目标资源(资源、上级评论)、附加信息(时间、来源) ，至于评论的顶、踩等属于评论操作其他的范畴了；而且评论是一个典型的多级数结构，但是在展示方面一般都采用的是二级显示结构，当然也有一些是采用多级层级展示(A站以前就是最近改版了)，很显然二级显示优雅的多。

实现效果

组件化

头像组件
meta组件
评论内容

内容就是一个v-html内容没啥可说的
子评论组件

还是一个评论组件没啥可说的
评论回复框组件

效果图

点击发送评论后效果

使用时在父组件定义回复评论的方法，并注入到emoji组件中即可

父组件中提供带注入到子组件中的方法

provide: function () {
        return {
            doComment: this.submitComment,
            doPraise: this.submitPraise
        }
    },

子组件注入后可以像自己的方法一样使用，并传递数据到了父或者祖父组件。

当然单点击回复框区域外面的区域时需要把评论回复组件隐藏掉

    mounted() {
        let that = this
        document.addEventListener('click', e => {
            const target = e.target
            const emojiRef = document.querySelector(".emoji-ref")
            if (emojiRef && emojiRef.style.display !== 'none' && !emojiRef.isSameNode(target) && !target.closest('.emoji-panel')) {
                that.overlay = false
            }
        })
    },

整理来说此评论组件基本上就算是完成了；当然还有很多的小细节上面是没有展示的。这里只是介绍了下思路，其中表情的图片来自西瓜视频。

总结

通过实现此组件，我学到了如何根据业务来比较优雅的来实现组件，组件根据其复用性拆分成一个一个功能性小组件在挂载上去从而实现一个大功能点的组件。
还有就是父子组件间通信的问题，这一块都可以单独拿出来讲了
作为一个后端学习前端能做出这些效果让我学习劲头更足了