vue父子组件通信实现简单的评论功能

最新推荐文章于 2024-05-25 11:37:13 发布

青蛙小王子

最新推荐文章于 2024-05-25 11:37:13 发布

阅读量1.1k

点赞数 3

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/walkcode/article/details/88756327

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue中父子组件通信在日常开发中还是比较常用的，与之相关的文章也非常多，这次分享给大家的是一个子组件和父组件交互的小例子，效果如下

上半部分是评论列表，下半部分是子组件，当填写评论人和评论内容，点击发表刷新上半部分的评论列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>发布评论</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
     
    </style>
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div class="container" id="app">

        <div class="row">
    
         <ul class="list-group" style="margin-top:20px;">
             <li class="list-group-item" v-for="item in commentList">
                 {{item.content}}
                 <span class="badge"> {{item.userName}}</span>
             </li>
            
         </ul>
     
           <reply-form  @func="refreshCommentList"></reply-form>
    
        </div>
    </div>
    <template id="repForm">
         <div>
            <div class="form-group">
                <label>评论人</label>
                <input type="text" class="form-control" id="userName" v-model="userName"/>
            </div>
            <div class="form-group">
                <label>评论内容</label>
               <textarea name="" id="input" class="form-control" rows="5" v-model="content"></textarea>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary" @click.prevent="saveComment">发表</button>
            </div>
       
         </div>
    </template>
    <script>
       
        var vm=new Vue({
           el:"#app",
           data:{
             commentList:[]
           },
           methods:{
               refreshCommentList:function refreshCommentList(){
                console.log("-------");
                var list=JSON.parse(localStorage.getItem('commentList')||'[]');
                this.commentList=list;
               }
           },
           created() {
               this.refreshCommentList();
           },
           components:{
               "reply-form":{
                   template:'#repForm',
                   data:function(){
                      return {
                          userName:'',
                          content:''
                      }
                   },
                   methods:{
                       saveComment:function saveComment(){
                           var comment={id:new Date(),userName:this.userName,content:this.content};
                           //取得之前存储的元数据
                           var list=JSON.parse(localStorage.getItem('commentList')||'[]');
                       
                           list.unshift(comment);
                           //重设localStorage
                           localStorage.setItem('commentList',JSON.stringify(list));

                           this.userName=this.content='';

                           //调用父组件方法刷新列表
                           this.$emit('func');
                        }
                   }
               }
           }
        });
    </script>
</body>
</html>

本例子的重点在于数据的存储和子组件调用父组件的方法刷新列表，这里使用浏览器的本地存储localstorage,父组件的方法调用使用$emit