1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 <link rel="stylesheet" href="../lib/css/bootstrap.min.css"> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 子组件拿到 父组件中的 loadComments方法--> 12 <comment-box @func="loadComments"></comment-box> 13 <ul class="list-group"> 14 <li class="list-group-item" v-for="item in list" :key="item.id"> 15 <span class="badge">评论人：{{ item.user }}</span> 16 {{ item.content}} 17 </li> 18 </ul> 19 </div> 20 <template id="tem1"> 21 <div> 22 <div class="form-group"> 23 <label>评论人：</label> 24 <input type="text" class="form-control" v-model="user"> 25 </div> 26 <div class="form-group"> 27 <label>评论内容：</label> 28 <textarea class="form-control" v-model="content"></textarea> 29 </div> 30 <div class="form-group"> 31 <label>评论内容：</label> 32 <input type="button" value="发表评论" class="btn-primary" @click="submit"> 33 </div> 34 </div> 35 </template> 36 <script> 37 38 const commentBox = { 39 template:'#tem1', 40 // 组件中的数据 41 data(){ 42 return { 43 user:'', 44 content:'' 45 } 46 }, 47 methods: { 48 submit(){ // 发表评论的方法 49 /** 50 * 分析发表评论的业务逻辑 51 * 1.评论数据存到哪里去 - - - 存放到 localStorage 中 52 * 2.先组织出一个最新的评论数据对象 53 * 3.把第二步中得到的评论对象保存到 localStorage 中 54 * 3.1 localStorage 只支持存放字符串数据，要先调用 JSON.stringify 55 * 3.2 在保存最新的评论数据之前，要先从 localStorage 获取之前的评论数据（string） 56 * 转换为一个 数组对象，然后，把最新的评论push到这个数组 57 * 3.3 如果获取到的 localStorage 中的评论字符串为空不存在，则可以返回一个“[]”， 58 * 让c 去转换 59 * 3.4 把最新的评论列表数据，再次调用 JSON.stringify 转为 数组字符串，然后调用 localStorage.setItem() 60 */ 61 var comment = { id:Date.now(),user:this.user,content:this.content } 62 // 从 localStorage 中获取所有的评论 63 var list = JSON.parse(localStorage.getItem('comments') || '[]'); 64 65 list.unshift(comment); 66 // 重新保存最新的评论数据 67 localStorage.setItem('comments',JSON.stringify(list)); 68 69 this.user = this.comment = ''; 70 // 触发 func （调用 父组件中的 loadComments方法） 71 this.$emit('func') 72 73 74 } 75 } 76 }; 77 const vm = new Vue({ 78 el:'#app', 79 data:{ 80 list:[ 81 {id:Date.now(),user:'李白',content:'天生我材必有用'}, 82 {id:Date.now(),user:'杜甫',content:'天生我材必有用！'}, 83 {id:Date.now(),user:'王维',content:'天生我材必有用！！'} 84 ] 85 }, 86 beforeCreate(){ 87 // 不能在这里调用 loadComments 方法，在执行这个钩子函数的时候，data 和 methods 还没有被初始化 88 }, 89 created(){ 90 // 在这里调用 loadComments方法 91 this.loadComments() 92 }, 93 methods:{ 94 loadComments(){ // 定义一个loadComments方法，从本地的 localStorage 中，加载评论列表 95 var list = JSON.parse(localStorage.getItem('comments') || '[]'); 96 this.list = list 97 } 98 }, 99 components:{ 100 // 子组件 101 commentBox:commentBox 102 } 103 }) 104 </script> 105 </body> 106 </html>