Vue 在實現評論回復功能方面,提供了較為便捷的實現方式。可以通過配置父子組件的 props 參數,在子組件中獲取父組件傳遞過來的數據,然后實現評論回復功能。
下面是一個示例代碼:
// 父組件 <template> <div> <CommentList :comments="comments" @reply="handleReply" /> </div> </template> <script> import CommentList from './CommentList.vue' export default { components: { CommentList }, data() { return { comments: [ { id: 1, content: '這是一條評論', replies: [ { id: 11, parentId: 1, content: '這是一條回復' } ] } ] } }, methods: { handleReply(reply) { // 處理評論回復 } } } </script> // 子組件 <template> <div> <ul> <li v-for="(comment, index) in comments" :key="index"> {{ comment.content }} <button @click="showReplyBox(comment)">回復</button> <ul v-if="comment.replies.length"> <li v-for="(reply, index) in comment.replies" :key="index"> {{ reply.content }} </li> </ul> </li> </ul> <div v-if="showBox"> <input v-model="replyContent" /> <button @click="submitReply">提交</button> </div> </div> </template> <script> export default { props: { comments: { type: Array, default: () =>[] } }, data() { return { replyContent: '', currentComment: null, showBox: false } }, methods: { showReplyBox(comment) { this.currentComment = comment this.showBox = true }, submitReply() { // 提交評論回復 this.showBox = false this.replyContent = '' } } } </script>
在父組件中,通過傳遞 comments 數組和 reply 方法給 CommentList 子組件。comments 數組包含所有評論信息,reply 方法在子組件中被調用,并攜帶評論回復信息。
在子組件 CommentList 中,通過 v-for 循環遍歷評論列表,展示評論及其回復信息。通過點擊回復按鈕,showReplyBox 方法被調用,顯示回復框。reply 方法被調用,提交評論回復信息。
以上是 Vue 實現評論回復功能的一個簡單示例,實際上可以根據業務需求進行擴展和優化。
上一篇python 將模塊打包
下一篇html字上下間距設置