Vue.js实现文章评论和回复评论功能

这篇文章主要介绍了如何使用Vue.js实现文章评论和回复评论功能。考虑到便捷性，作者决定整个页面都用Vue组件来实现，而非部分使用jade渲染。

在线demo已经提供给读者，大家可以直接在线体验。接下来是效果图展示，页面可以直接进行评论，点击别人的评论也能回复。

HTML结构如下：

```html

```

数据全部由根组件传递下去。这里监听了几个事件，用于实现不同的功能。其中，《article-content》是文章内容的组件，直接绑定一个对象，子组件可以通过`.`的方式轻松调用数据。

接下来是一个较为简单的组件，《ment-textarea》即文本框组件。它的Vue定义如下：

```vue

Vueponent('mentTextarea',{

template:`

props: ['type','name'],

data: function(){

return {mentText:""}

},

methods: {

addComment: function() {

this.$emit("submit",this.mentText);

this.mentText = "";

},

canelComment: function() {

this.$emit("canel");

this.mentText = "";

}

}

});

```

这个文本框组件可以实现评论的发表与取消功能。通过v-model双向绑定文本框内容，点击“发表”按钮时，会触发一个事件将评论内容传给父组件。如果需要进行回复操作，会显示“你回复x”的提示框。由于跨组件通信的需求，这个提示框的实现方式是通过父组件的一个属性来实现兄弟组件间的通信。

Vue.js可以轻松实现文章评论和回复功能，开发者只需要根据需求定义好组件和事件，就能实现一个功能完善、交互性强的评论系统。memt-content组件——解读评论内容

让我们先明确json格式的内容展示。假设我们有一个评论系统，其中包含了评论人名字、评论时间、评论内容以及回复信息等。现在我们来解读一下“memt-content”组件的相关内容。

首先是评论人的名字，例如“有毒的黄同学”，这是评论者的标识，让我们知道这条评论来自于谁。紧接着是评论时间“2016-08-17”，这有助于我们了解评论的发布顺序或者时间线。评论内容“好,讲得非常好，good”则是评论的核心部分，表达了评论者对某事物或内容的看法和观点。

而回复信息则是一个数组，包含了回复者的名字、被评论者的名字、回复时间以及回复内容。例如回复中的“傲娇的”是回复者的名字，“有毒的黄同学”是被评论者的名字，回复时间“2016-09-05”告诉我们这条回复是在何时发表的，而回复内容“你说得对”则是表达了对原评论的认同或支持。

接下来我们来看memt-content组件的代码实现。这是一个Vue组件，用于展示评论内容。首先判断是否有评论，如果没有则显示“暂无评论，我来发表第一篇评论！”来鼓励用户发表自己的看法。如果有评论则进行遍历展示。每条评论都会绑定一个索引值，以便在点击某条评论时能够知道是第几条评论。点击评论内容时，会触发changeCommenter事件，向父组件发送更改评论者的指令。

在二级评论部分，同样是对reply数组进行遍历，展示回复的内容和相关信息。点击回复内容时，也是触发changeCommenter事件，但是传递的是回复者的名字和一级评论的索引值。这样设计是为了能够精确地定位到被点击的评论或回复，执行相应的操作。

整体来看，memt-content组件通过丰富的交互和动态展示，为用户提供了一个良好的评论体验。无论是发表评论还是查看回复，都能够轻松实现，并且具备良好的用户体验。父组件

在Vue框架中，我们有一个父组件正在被构建，它涉及评论功能的核心逻辑。让我们深入理解这个组件的数据结构、方法和逻辑流程。

我们定义了一个Vue实例，挂载到id为"ment"的元素上。数据部分包括多个关键属性：

1. `menter`：当前登录名，从session中获取。

2. `type`：标识当前用户是发表新的评论（0）还是回复其他评论（1）。

3. `oldComment`：被点击评论者的名字（在实际应用中应为id）。

4. `chosedIndex`：被选中的评论的索引。

5. `article`：文章的基本信息，包括标题、发布时间、阅读量以及内容。

6. `ment`：存储评论内容的数组。

接下来，我们深入其中的方法：

`addComment`：添加评论的方法。根据`type`的值决定是发表新评论还是回复其他评论。如果是新评论，则直接推送到`ment`数组；如果是回复，则添加到被选中评论的`reply`数组中。

`changCommmer`：监听点击其他评论的事件。更新`oldComment`和`chosedIndex`，并将`type`设为1，表示用户想要回复评论。

`canelCommit`：监听取消评论事件。将`type`重置为0，表示用户不再进行回复。

关于数据结构的思考：

这个父组件实现了评论功能的核心逻辑，包括添加评论、回复评论和取消操作。在构建实际应用时，还需要考虑与数据库的交互、用户界面的展示等问题。作者对于数据结构的思考也展示了在开发过程中不断学习和进步的态度，这是成为一名优秀开发者的重要品质。

希望这篇文章能够帮助大家更好地理解这个父组件的工作原理和逻辑，也希望大家能够支持狼蚁SEO的学习分享。在开发过程中，我们总会遇到各种挑战和问题，但只要我们持续学习、不断，就一定能够克服它们，创造出更优秀的作品。

以上即为本文的全部内容，希望对大家有所启发和帮助。也欢迎大家多多交流、分享自己的经验和见解。谢谢！