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

下面我来详细讲解一下“简易Vue评论框架的实现(父组件的实现)”:

简述

本文主要介绍如何使用Vue.js实现一个简单的评论框架，涉及组件通信、事件触发等相关知识点。本文将从父组件的实现开始，带你逐步实现一个完整的评论框架。

父组件的实现

创建父组件

首先，我们需要创建一个父组件，用于渲染整个评论区。可以先创建一个Comment.vue文件，并定义一个简单的Comment组件：

<template>
  <div class="comment">
    <h2>评论</h2>
    ...
  </div>
</template>

<script>
export default {
  name: 'Comment',
  data() {
    return {
      comments: []
    }
  }
}
</script>

可以看到，这个组件包含一个标题和一个空的评论列表，我们将在后面的步骤中动态添加评论。

子组件的引入

接下来，我们需要引入两个子组件：CommentList用于渲染评论列表，CommentForm用于添加新的评论。可以使用Vue.js中的components选项来引入子组件：

<template>
  <div class="comment">
    <h2>评论</h2>
    <comment-list :comments="comments"></comment-list>
    <comment-form></comment-form>
  </div>
</template>

<script>
import CommentList from './CommentList.vue'
import CommentForm from './CommentForm.vue'

export default {
  name: 'Comment',
  components: {
    CommentList,
    CommentForm
  },
  data() {
    return {
      comments: []
    }
  }
}
</script>

其中，comments属性用于传递评论列表数据给CommentList子组件。

事件传递

接下来，我们需要实现一个方法，用于向评论列表中添加新的评论。这个方法将在子组件CommentForm中被触发。可以使用Vue.js的事件系统来实现这个目标。

首先，在父组件中定义一个addComment方法，用于接收子组件传递的新的评论：

<template>
  <div class="comment">
    <h2>评论</h2>
    <comment-list :comments="comments"></comment-list>
    <comment-form @submit="addComment"></comment-form>
  </div>
</template>

<script>
import CommentList from './CommentList.vue'
import CommentForm from './CommentForm.vue'

export default {
  name: 'Comment',
  components: {
    CommentList,
    CommentForm
  },
  data() {
    return {
      comments: []
    }
  },
  methods: {
    addComment(comment) {
      this.comments.unshift(comment)
    }
  }
}
</script>

可以看到，在CommentForm组件上添加了@submit="addComment"事件监听，当用户点击提交按钮时，子组件将会触发一个submit事件，并通过$emit方法将新的评论传递给父组件。

实现完成

至此，父组件的实现基本完成，我们已经可以在父组件中展示评论列表和添加新的评论了。当用户提交新评论时，它会被动态添加到评论列表的顶部。

示例说明

以下是两个示例，分别说明了如何在父组件中添加评论、如何在子组件中提交新的评论。

示例1: 在父组件中添加评论

<template>
  <div class="comment">
    <h2>评论</h2>
    <comment-list :comments="comments"></comment-list>
    <comment-form></comment-form>
  </div>
</template>

<script>
import CommentList from './CommentList.vue'
import CommentForm from './CommentForm.vue'

export default {
  name: 'Comment',
  components: {
    CommentList,
    CommentForm
  },
  data() {
    return {
      comments: [
        {
          name: '张三',
          content: '这个框架真的很好用！'
        },
        {
          name: '李四',
          content: '顶一下，赞一个！'
        }
      ]
    }
  }
}
</script>

示例2: 在子组件中提交新的评论

<!-- CommentForm.vue -->
<template>
  <form class="comment-form" @submit.prevent="handleSubmit">
    <label>姓名：</label>
    <input type="text" v-model="name">
    <label>评论：</label>
    <textarea v-model="content"></textarea>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      content: ''
    }
  },
  methods: {
    handleSubmit() {
      const comment = {
        name: this.name,
        content: this.content
      }
      this.$emit('submit', comment)
      this.name = ''
      this.content = ''
    }
  }
}
</script>

可以看到，在CommentForm组件中通过this.$emit('submit', comment)将新的评论触发了submit事件，并将评论数据传递给了父组件。同时，由于表单提交后需要清空数据，所以在提交后我们也清空了输入框中的数据。