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. MyEclipse 过期

    package util; import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamRea ...

  2. 大文件上传插件webupload插件

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  3. 理解Nodejs的Event Loop

    Node的“event loop”主要是用来处理高输出量的.这很神奇,这也是为什么node可以在单线程的情况下同时处理很多的后台操作.本文就会集中讲述event loop是怎么运行的,这样你可以可以使 ...

  4. 从LSM-Tree、COLA-Tree谈到StackOverflow、OSQA

    转自: http://blog.csdn.net/v_july_v/article/details/7526689 从LSM-Tree.COLA-Tree谈到StackOverflow.OSQA 作者 ...

  5. HDU6023 Automatic Judge 2017-05-07 18:30 73人阅读 评论(0) 收藏

    Automatic Judge Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  6. 比较分析 Spring AOP 和 AspectJ 之间的差别

    面向方面的编程(AOP) 是一种编程范式,旨在通过允许横切关注点的分离,提高模块化.AOP提供方面来将跨越对象关注点模块化.虽然现在可以获得许多AOP框架,但在这里我们要区分的只有两个流行的框架:Sp ...

  7. Delphi for iOS开发指南(1):在Mac上配置你的开发环境

    http://cache.baiducontent.com/c?m=9d78d513d99516f11ab7cf690d678c3b584380122ba7a0020fd18438e4732b4050 ...

  8. Python学习-28.Python中的列表切片

    在实际的业务过程中,经常有这么一个操作:取一个列表的一部分进行操作,而不影响原来的列表.也就是将原来的列表复制一个部分副本并对其进行操作. 举个完整例子: list = ['a','b','c','d ...

  9. LeetCode151：Reverse Words in a String

    题目: Given an input string, reverse the string word by word. For example,      Given s = "the sk ...

  10. dorado-SplitSpanel控件

    1.这是一个界面布局控件 2.分为SideControl边区域和MainControl主区域 3.常用属性 3.1 collapsed:打开页面时,边区域是否显示 3.2 position:边区域占总 ...