Vue把父组件的方法传递给子组件调用(评论列表例子)

效果展示:

相关Html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/vue-2.4.0.js"></script>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <style>

    </style>

</head>

<body>

<div id="app">

    <cmt-box @func="loadComments"></cmt-box>

    <ul class="list-group" v-for="item in list" :key="item.id">

        <li class="list-group-item">

            <span class="badge">评论人:{{item.user}}</span>

            {{item.content}}

        </li>

    </ul>

</div>

<template id="temp1">

    <div>

        <div class="form-group">

            <span>评论人:</span>

            <input type="text" class="form-control" v-model="user">

        </div>

        <div class="form-group">

            <span>评论内容:</span>

            <input type="text" class="form-control" v-model="content">

        </div>

        <div class="form-group">

            <input type="button" value="发表评论" class="btn btn-primary"

                   @click="postComment"

            >

        </div>

    </div>

</template>

<script>

    var commentBox = {

        data: function () {

            return {

                user: '',

                content: ''

            }

        },

        template: '#temp1',

        methods: {

            postComment: function () {

//                分析发表评论的业务逻辑

//                1.评论数据存到哪里去 存到本地

//                2.先组指出一个最新的评论数据对象

//3.想办法把第二步中得到的评论对象 保存到localStorage

//                3.1本地 只支持存放字符串数据 要先掉JSON.stringify

//                3.2在保存最新的评论数据之前,先从localStorage获取之前的评论数据 转换为一个数组对象

//                然后把最新的评论 push到这个数组

//                3.3如果获取的localStorage中评论字符串 为空不存在 则可以返回空'[]' 让JSON.parse()去转换

//                3.4 把最新的评论列表数组 再次调用JSON.stringify转为数组字符串 最后localStorage.setitem

                var comment = {id: Date.now(), user: this.user, content: this.content};

                console.log(this.user);

                //这个是从localStorage中 获取所有的评论

                var list = JSON.parse(localStorage.getItem('cmts') || '[]');

                list.unshift(comment);

                //重新保存最新的评论数据

                localStorage.setItem('cmts', JSON.stringify(list));

                this.user = this.content = '';

                this.$emit('func');

            }

        }

    }

    var vm = new Vue({

        el: '#app',

        data: {

            list: [

                {id: Date.now(), user: '李白', content: '天成我材必有用'},

                {id: Date.now(), user: '江小白', content: '劝君更尽一杯酒'},

                {id: Date.now(), user: '小马', content: '我姓马,风吹草低见牛羊'}

            ]

        },

        created:function () {

            this.loadComments();

        },

        methods: {

            loadComments: function () {//从localStorage中加载评论

                var list = JSON.parse(localStorage.getItem('cmts') || '[]');

                this.list = list;

            }

        },

        components: {

            'cmt-box': commentBox

        }

    });

</script>

</body>

</html>

Vue把父组件的方法传递给子组件调用(评论列表例子)的更多相关文章

  1. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  2. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue 父组件中的数据如何传递给子组件

    父组件:<template> <div id="app"> <img src="./assets/logo.png"> &l ...

  4. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  5. 【VUE】7.组件通信（二）子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  6. Vue2.x中的父组件数据传递至子组件

    父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...

  7. 如果把父组件的数据实时的传递到子组件：用watch

    1.在子组件使用watch来监听传递给子组件的数据,然后更新子组件的数据. 2.watch和computed结合使用效果非常好. 参考链接:https://blog.csdn.net/zhouweix ...

  8. Vue父子组件数据双向绑定，子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

  9. vue项目|在弹窗中引入uchart图表子组件不显示

    为了解决uchart作为子组件在主组件里引用但不显示的情况,(同样适用于弹窗之中)目前有三种方法. 1-解决方式 1>如果你使用的uchart子组件是从官方拿的例子:进入到uchart子组件将o ...

随机推荐

  1. org.apache.cxf 官方骨架

    mvn archetype:generate -DarchetypeCatalog=remote 用 cxf 筛选结果 官方三大项目骨架 org.apache.cxf:cxf-http-basic ( ...

  2. APUE（5）---标准I/O库 (3)

    十.定位流 #include <stdio.h> long ftell(FILE *fp); //若成功,返回当前文件位置指示:若出错,返回-1L int fseek(FILE *fp, ...

  3. hdu 4888 最大流慢板

    http://acm.hdu.edu.cn/showproblem.php?pid=4888 添加一个源点与汇点,建图如下: 1. 源点 -> 每一行对应的点,流量限制为该行的和 2. 每一行对 ...

  4. Delphi XE5 图解为Android应用制作签名

    http://redboy136.blog.163.com/blog/static/107188432201381872820132 Delphi XE5 图解为Android应用制作签名 2013- ...

  5. Spring框架事务支持模型的优势

    全局事务 全局事务支持对多个事务性资源的操作,通常是关系型数据库和消息队列.应用服务器通过JTA管理全局性事务,API非常烦琐.UserTransaction通常需要从JNDI获取,意味着需要与JND ...

  6. C++ 补遗

    C++通过引用传递数组 数组形参可以声明为数组的引用.如果形参是数组的引用,编译器不会将数组实参转化为指针,而是传递数组的引用本身. 在这种情况下,数组大小成为形参和实参类型的一部分(实参长度与形参长 ...

  7. JavaScript中Ajax的使用

    AJAX全称为“Asynchronous javascript and XML”(异步javascript和XML),是指一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行少量数据交换,AJ ...

  8. MYC编译器源码之语法分析

    MyC编译器采用自顶向下的方法进行语法解析,这种语法解析方式,一般是从最左边的Token开始,然后自顶向下看哪一条语法规则可能包含这个Token,如果包含这个Token,则自左向右根据这条语法规则逐一 ...

  9. 设计模式之代理模式（Proxy Pattern）_远程代理解析

    一.什么是代理模式? 顾名思义,代理就是第三方,比如明星的经纪人,明星的事务都交给经纪人来处理,明星只要告诉经纪人去做什么,经纪人自然会想办法去做,做完之后再把结果告诉明星就好了 本来是调用者与被调用 ...

  10. 用注册表禁止windows添加新用户

    运行 regedt32.exe 打开你的注册表,里面有一个目录树:打开其中目录 HKEY_LOCAL_MACHINE再打开其中目录 SAM再打开其中目录 SAM再打开其中目录 Domains再打开其中 ...