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


    效果图如下:

      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>
  • 相关阅读:
    BrowserSync,自动刷新,解放F5,去掉更新提示
    js获取手机系统语言
    块元素,行内元素,行内块区别
    原生js判断某个元素是否有指定的class名的几种方法
    如何实现调用console.log(‘good’.repeat(3))时输出goodgoodgood?
    数组如何去除重复数据,只保留一条
    Sentinel笔记-Flow流控规则
    sentinel笔记 NodeSelectorSlot,ClusterBuilderSlot
    Sentinel笔记--Slotchain
    Sentinel笔记-核心类
  • 原文地址:https://www.cnblogs.com/linm/p/12460384.html
Copyright © 2020-2023  润新知