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

LinMeng
• 阅读 1461

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./js/vue.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
  <div id="app">
    <cmt-box @func="loadComments"></cmt-box>

    <ul class="list-group">
      <li class="list-group-item" v-for='item in list' :key="item.id">
        <span class="badge">评论人: {{item.user}}</span>
        {{item.content}}
      </li>
    </ul>

  </div>
  <template id='tmp1'>
    <div>
      <div class="form-group">
        <label>评论人:</label>
        <input type="text" class="form-control" v-model="user">
      </div>

      <div class="form-group">
        <label>评论内容:</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>

      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>
    </div>
  </template>

  <script>

    var commentBox = {
      template: '#tmp1',
      data() {
        return {
          user: '',
          content: ''

        }
      },
      methods: {
        postComment() {  //发表评论的方法
          //分析:发表评论的业务逻辑
          //1.评论数据存到哪里去?存放到了localStorage中
          //2.先组织出一个最新的评论数据对象
          //3.想办法,把第二步中得到的评论对象,保存到localStorage中    存数据  localStorage.setItem
            //3.1  localStorage 只支持存放字符串数据,要先调用JSON.stringify
            //3.2  在保存最新的评论数据之前,要先从localStorage获取到之前的评论数据(string),转换为一个数组对象,然后把最新的评论unshift到这个数组
            //3.3  如果获取到的localStorage中的评论字符串为空不存在,则可以返回一个'[]',让JSON.parse去转换,得到空对象
            //3.4  把最新的评论列表数组,再次调用JSON.stringify转为数组字符串,然后调用localStorage.setItem()

          var comment = { id: Date.now(), user: this.user, content: this.content };
          //从localStorage中获取所有的评论
          var list=JSON.parse(localStorage.getItem('cmts')||'[]');
          list.unshift(comment);
          //重新保存最新的评论数据
          localStorage.setItem('cmts',JSON.stringify(list));
          this.user=this.content='';
          //重新调用父组件传递过来的方法,实现无操作刷新页面
          // this.loadComments();
          this.$emit('func');
        }
      }
    }

    //创建Vue实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: '李白', content: '天生我材必有用' },
          { id: Date.now(), user: '江小白', content: '全军更尽一杯酒' },
          { id: Date.now(), user: '白小白', content: '后来的我们没有走到一起' }
        ]
      },
      beforeCreate(){
        //这里不能调用loadComments方法,因为在执行这个钩子函数的时候,data和methods还没有被初始化好
      },
      created(){
        this.loadComments();
      },
      methods: {
        loadComments(){
          var list=JSON.parse(localStorage.getItem('cmts')||'[]');
          this.list=list;
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Js使用面向对象和面向过程的方法实现拖拽物体的效果
1.面向过程的拖拽实现代码:!(https://oscimg.oschina.net/oscnet/d680c759957babef2fec0902676eaa35ad9.gif)<!DOCTYPEhtml<html<head<titledragDiv</title
Wesley13 Wesley13
3年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
LinMeng
LinMeng
Lv1
争取早日实现“代码自由” wa !!!
文章
50
粉丝
7
获赞
33