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

LinMeng 等级 974 0 1
标签: 前端

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

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

相关推荐

React 组件通信之发布订阅模式
React 通信 react的数据流是单向的, react 通信有以下几种方式: 父向子通信: 传入props 子向父通信:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值 父向孙通信:利用context传值。React.createContext() 兄弟间通信: ​ 1、找一个相同的父组件,既可以用pr
vue的8种通信方式
1.props / emit 1. 父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:\'红楼梦', '西游记','三国演义'\ // section父组件 <template <div class"section"
关于:父组件中的子组件中的子组件(孙级)添加数据后怎么样去调用父组件中的方法呢?
1、需求引入image.png 这是父组件下的子组件的子组件,一个绑定子设备的弹出窗modal,那么我们怎么样在这个组件中选中子设备后点击确定时去触发父组件的父组件的table列表数据刷新呢? image.png image.png image.png 组件的层级关系.png上述的图示便是部分代码的展示,一般的组件传值有父组件传子组件(
Vue父子组件
几种常见的通信方式:1、prop 属性父组件通过绑定属性的方式,给子组件传值,同时子组件通过设置 props 来接收 let Child Vue.extend( template: 'content', props: content: type: String, default: () r
CSS定位中“父相子绝”
一、定位的介绍   定位有三种:相对定位(position:relative)、绝对定位(position:absolute)、固定定位(position:fixed) 二、三种定位的用法,特点和实例 2.1、相对定位  特性:不脱标、形影分离、老家留坑 ![](https://oscimg.oschina.net/oscnet/f3c139667c
Java 子类 instanceof 父类
1.结论: ----- * 子类 instanceof 父类 == true * 父类 instanceof 子类 == false 2.测试代码 ------ @Test public void testInstanceof() { // 子类 instanceof 父类
Java 类的继承
**Java 类的继承规则** **[类的继承教学视频](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fv.youku.com%2Fv_show%2Fid_XMzg3NjAxMzUxNg%3D%3D.html)** * **子类继承父类的公有属性和方法** * **子类可以
Java的类继承
知识点 1、继承 作用:提高代码的重用性,继承之后子类可以继承父类中的属性和方法 减少重复代码 条件:子类和父类要满足is a的逻辑关系,才能使用继承。 如:苹果 is a水果 语法:使用extends 连接子类和父类。子类 extends 父类 Java是单继承,一个类只能继承一个父类。 子类不能继承父类私有的属性,但是可以
Java高级类特性(一)
### 一、继承性 ![](https://oscimg.oschina.net/oscnet/4da087cd3fa07b567f305a479b4035e99b8.png) 1)继承的使用:权限修饰符 class A extends B{}; 2)子类:A 父类(基类 SuperClass):B 3)子类继承父类后,父类中声明的属性、方法,子
java对象
子父类间的成员方法关系:         子类调用的时候,先用的是自己的,如果没有再使用父亲的。如果父亲没有,就使        用父亲的父亲的...,最后,如果没有,就报错。              当子类中有和父类一模一样的方法的时候,子类使用的是自己的。     这种现象被称为方法(覆盖,复写,)重写。 方法重写:   
Angular组件交互
### Angular2中的组件交互方式很多,可分为父子组件交互和非父子组件交互两种情况。 在学习之前需要了解组件的[@Input](https://my.oschina.net/InPuto)和[@Output](https://my.oschina.net/output1314)的用法 //子组件中内容 @Input() 绑定的属性名
BeanDefinition 合并
### BeanDefinition 的合并 * 1.BeanDefinition 有父子关系,有个属性叫`parentName`,通过`parentName`可以设置`BeanDefinition`的父子关系 * 2.为什么要设置BeanDefinition的父子关系,因为子类可以继承父类的属性,抽出共性,跟java的继承有点像 * 3.Be
FLutter父子组件通信
本文介绍flutter父子组件数据传递和回调. 还是以之前的代码为例[Flutter\_DayByDay](https://gitee.com/Royce_he/Flutter_DayByDay)由于之前用React-Native写项目,顺便对比一下 ##### RN 父组件直接在xml标签中写属性={值/方法},子组件通过props去取属性和方法
Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数。看一下效果图 ![](https://img2018.cnblogs.com/blog/1038765/201907/1038765-20190702152130487-420290106.gif) 父级组件实现 ------ 在父级组件中写一个*
Python Day24:类的继承、派生、覆盖、super()、绑定、非绑定方法
## 类的继承、派生、覆盖、super() ```python 类的继承: 子类继承父类,只需要在定义类的时候在类名后面加上(父类名)。 继承之后,父类的属性方法、子类都可以访问 派生: 子类继承父类后,自己在父类的基础上,又添加了一些属于自己特性的属性、方法