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

LinMeng 等级 522 0 0
标签: 前端

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

<!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>
收藏
评论区

相关推荐

练习父组件调用子组件方法----发表评论案例
<DOCTYPE html <html lang"en" <head <meta ch
React 组件间通信的10种方法
组件间通信方式总结 父组件 子组件: 1. Props 2. Instance Methods 子组件 父组件: 1. Callback Functions 2. Event Bubbling 兄弟组件之间: 1. Parent Component 不太相关的组件之间: 1. Context 2. Portals 3. Global
JavaScript 中的二叉树以及二叉搜索树的实现及应用
接下来让我们一起来探讨js数据结构中的树。这里的树类比现实生活中的树,有树干,树枝,在程序中树是一种数据结构,对于存储需要快速查找的数据非有用,它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构:) (https://imghelloworld.osscnbe
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
React 组件通信之发布订阅模式
React 通信 react的数据流是单向的, react 通信有以下几种方式: 父向子通信: 传入props 子向父通信:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值 父向孙通信:利用context传值。React.createContext() 兄弟间通信: ​ 1、找一个相同的父组件,既可以用pr
Python的新式类和旧式类
概述: Python中支持多继承,也就是一个子类可以继承多个父类/基类。当一个调用一个自身没有定义的属性时,它是按照何种顺序去父类中寻找的呢?尤其是当众多父类中都包含有同名的属性,这就涉及到新式类 和 经典类的区别。 多继承: class Food(object): 2 3 def __init__(self, name, col
vue的8种通信方式
1.props / emit 1. 父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:\'红楼梦', '西游记','三国演义'\ // section父组件 <template <div class"section"
Python多进程 - 实现多进程的几种方式
方式一: os.fork() coding:utf8 """ pidos.fork() 1.只用在Unix系统中有效,Windows系统中无效 2.fork函数调用一次,返回两次:在父进程中返回值为子进程id,在子进程中返回值为0 """ import os pidos.fork() if pid0:
关于:父组件中的子组件中的子组件(孙级)添加数据后怎么样去调用父组件中的方法呢?
1、需求引入image.png 这是父组件下的子组件的子组件,一个绑定子设备的弹出窗modal,那么我们怎么样在这个组件中选中子设备后点击确定时去触发父组件的父组件的table列表数据刷新呢? image.png image.png image.png 组件的层级关系.png上述的图示便是部分代码的展示,一般的组件传值有父组件传子组件(
【Flutter实战】对齐与相对定位(Align)
4.6 对齐与相对定位(Align)在上一节中我们讲过通过Stack和Positioned,我们可以指定一个或多个子元素相对于父元素各个边的精确偏移,并且可以重叠。但如果我们只想简单的调整一个子元素在父元素中的位置的话,使用Align组件会更简单一些。 4.6.1 AlignAlign 组件可以调整子组件的位置,并且可以根据子
vue最新面试题
最近在面试,总结几个重点的面试题:一、vue父子组件之间的传值:简单来说,子组件通过props方法接受父组件传来的值,子组件通过$emit方法来向父组件发送数据。(具体案例可以看我之前写的博客)。二、vue生命周期函数:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestr
你不可不知的JS面试题(第二期)
1、什么是继承?子类可以使用父类的所有功能,并且对功能进行扩展。 新增方法 改用方法 (1)、ES6使用extends子类继承父类的方法。 // 父类     class A         constructor(name)             this.name name;                  getNa
一篇文章带你搞懂Python中的继承和多态
一、继承的介绍继承是一种创建新的类的方式,新创建的叫子类,继承的叫父类、超类、基类。继承的特点就是子类可以使用父类的属性(特征、技能)。继承是类与类之间的关系。继承可以减少代码冗余、提高重用性。在现实生活中,继承一般指的是子女继承父辈的财产,如下图: 二、如何用继承?1.继承语法Class 派生类名(基类名):基类名写在括号里。在继承关系中,已有的,设计好
python 赋值引用 浅拷贝 深拷贝
一、基础概念1、直接赋值:其实就是对象的引用(别名)。2、浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象。3、深拷贝(deepcopy): copy 模块的 deepcopy 方法,完全拷贝了父对象及其子对象。二、代码示例import copya [1, 2, 3, 4, ['a', 'b']] 原始对象 b a
Vue父子组件
几种常见的通信方式:1、prop 属性父组件通过绑定属性的方式,给子组件传值,同时子组件通过设置 props 来接收 let Child Vue.extend( template: 'content', props: content: type: String, default: () r