vue组件实现发表评论功能

为实现发表评论功能，需要使用vue组件来实现。首先需要一个评论输入框组件，用于用户输入评论内容，然后需要一个评论列表组件，用于显示所有评论。

1. 评论输入框组件

评论输入框组件需要接受以下几个组件属性：

- value：绑定输入框的值

- placeholder：输入框的占位符

- isDisabled：输入框是否禁用

- inputClass：输入框的样式类

- maxLength：输入框的最大长度

- onInput：输入框内容发生变化时触发的方法

- onSubmit：用户提交评论时触发的方法

<template>
  <div>
    <textarea 
      :value="value" 
      :placeholder="placeholder" 
      :disabled="isDisabled" 
      :class="inputClass" 
      :maxlength="maxLength"
      @input="onInput($event.target.value)"
    ></textarea>
    <button 
      :disabled="isDisabled" 
      @click="onSubmit"
    >
      发表
    </button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    inputClass: {
      type: String,
      default: ''
    },
    maxLength: {
      type: Number,
      default: Infinity
    },
    onInput: {
      type: Function,
      default: () => {}
    },
    onSubmit: {
      type: Function,
      default: () => {}
    }
  }
}
</script>

<style scoped>
textarea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  resize: none;
}
button {
  padding: 10px 20px;
  border: none;
  background-color: #3498db;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

2. 评论列表组件

评论列表组件需要接受以下几个组件属性：

- comments：所有评论的数组

- commentClass：每条评论的样式类

<template>
  <div>
    <h3>评论列表</h3>
    <ul>
      <li v-for="(comment, index) in comments" :key="index" :class="commentClass">
        {{ comment }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    comments: {
      type: Array,
      default: () => []
    },
    commentClass: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 5px;
}
</style>

3. 父组件使用

在父组件中，需要先用v-model指令将评论输入框组件的值和父组件中的变量绑定起来，然后监听评论输入框组件的submit事件，将用户输入的评论加入父组件中的评论数组中。

<template>
  <div>
    <comment-input 
      v-model="comment" 
      placeholder="写下你的评论" 
      @submit="addComment" 
      :is-disabled="isPostingComment"
      inputClass="comment-input"
      maxLength="140"
    ></comment-input>
    <comment-list :comments="comments" commentClass="comment-item"></comment-list>
  </div>
</template>

<script>
import CommentInput from '@/components/CommentInput'
import CommentList from '@/components/CommentList'

export default {
  components: {
    CommentInput,
    CommentList
  },
  data() {
    return {
      comment: '',
      comments: [],
      isPostingComment: false
    }
  },
  methods: {
    addComment() {
      if (!this.comment.trim()) {
        return
      }
      this.isPostingComment = true
      this.$nextTick(() => {
        this.comments.push(this.comment)
        this.comment = ''
        this.isPostingComment = false
      })
    }
  }
}
</script>

<style scoped>
.comment-input {
  margin-bottom: 10px;
}
.comment-item {
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}
</style>

它的实现过程为：

1、首先引入之前创建的子组件 CommentInput（评论输入框组件） 和 CommentList（评论列表组件）。

2、定义了父组件中的数据变量，包括 comment（用户输入的评论），comments（所有已发布的评论），isPostingComment（表示当前是否正在发布评论）。

3、在 CommentInput 组件上监听submit事件，调用 addComment 方法，将用户输入的评论加入 comments 数组中。在父组件中加入isPostingComment属性表示提交状态，通过this.$nextTick来等待DOM更新。这样，用户就可以向评论列表中发布评论了。

总结：

Vue 组件化开发是 Vue 的重要特性，它可以将功能相近、耦合度高的 HTML、CSS 和 JavaScript 封装为一个组件，并提供独立的作用域。这样我们可以更好地维护代码，提高代码的可复用性、可扩展性。