练习父组件调用子组件方法----发表评论案例

效果图如下：
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8   <title>Document</title>
  9   <script src="./js/vue.js"></script>
 10   <link rel="stylesheet" href="./lib/bootstrap.css">
 11 </head>
 12 
 13 <body>
 14   <div id="app">
 15     <cmt-box @func="loadComments"></cmt-box>
 16 
 17     <ul class="list-group">
 18       <li class="list-group-item" v-for='item in list' :key="item.id">
 19         <span class="badge">评论人: {{item.user}}</span>
 20         {{item.content}}
 21       </li>
 22     </ul>
 23 
 24   </div>
 25   <template id='tmp1'>
 26     <div>
 27       <div class="form-group">
 28         <label>评论人:</label>
 29         <input type="text" class="form-control" v-model="user">
 30       </div>
 31 
 32       <div class="form-group">
 33         <label>评论内容:</label>
 34         <textarea class="form-control" v-model="content"></textarea>
 35       </div>
 36 
 37       <div class="form-group">
 38         <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
 39       </div>
 40     </div>
 41   </template>
 42 
 43   <script>
 44 
 45     var commentBox = {
 46       template: '#tmp1',
 47       data() {
 48         return {
 49           user: '',
 50           content: ''
 51 
 52         }
 53       },
 54       methods: {
 55         postComment() {  //发表评论的方法
 56           //分析：发表评论的业务逻辑
 57           //1.评论数据存到哪里去？存放到了localStorage中
 58           //2.先组织出一个最新的评论数据对象
 59           //3.想办法，把第二步中得到的评论对象，保存到localStorage中    存数据  localStorage.setItem
 60             //3.1  localStorage 只支持存放字符串数据，要先调用JSON.stringify
 61             //3.2  在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据(string)，转换为一个数组对象，然后把最新的评论unshift到这个数组
 62             //3.3  如果获取到的localStorage中的评论字符串为空不存在，则可以返回一个'[]',让JSON.parse去转换，得到空对象
 63             //3.4  把最新的评论列表数组，再次调用JSON.stringify转为数组字符串，然后调用localStorage.setItem()
 64 
 65           var comment = { id: Date.now(), user: this.user, content: this.content };
 66           //从localStorage中获取所有的评论
 67           var list=JSON.parse(localStorage.getItem('cmts')||'[]');
 68           list.unshift(comment);
 69           //重新保存最新的评论数据
 70           localStorage.setItem('cmts',JSON.stringify(list));
 71           this.user=this.content='';
 72           //重新调用父组件传递过来的方法，实现无操作刷新页面
 73           // this.loadComments();
 74           this.$emit('func');
 75         }
 76       }
 77     }
 78 
 79     //创建Vue实例,得到 ViewModel
 80     var vm = new Vue({
 81       el: '#app',
 82       data: {
 83         list: [
 84           { id: Date.now(), user: '李白', content: '天生我材必有用' },
 85           { id: Date.now(), user: '江小白', content: '全军更尽一杯酒' },
 86           { id: Date.now(), user: '白小白', content: '后来的我们没有走到一起' }
 87         ]
 88       },
 89       beforeCreate(){
 90         //这里不能调用loadComments方法，因为在执行这个钩子函数的时候，data和methods还没有被初始化好
 91       },
 92       created(){
 93         this.loadComments();
 94       },
 95       methods: {
 96         loadComments(){
 97           var list=JSON.parse(localStorage.getItem('cmts')||'[]');
 98           this.list=list;
 99         }
100       },
101       components: {
102         'cmt-box': commentBox
103       }
104     });
105   </script>
106 </body>
107 
108 </html>
练习父组件调用子组件方法----发表评论案例

猜你喜欢
