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. maven插件mybatis-generator生成代码

    第一步,在pom中加入插件 <plugin> <groupId>org.mybatis.generator</groupId> <artifactId> ...

  2. gj2 python中一切皆对象

    2.1 python中一切皆是对象 动态语言和静态语言的区别,Python的面向对象更彻底 同时动态语言,代码的灵活性高 没有编译(检查)的过程,错误只有在运行起来后才会发现 函数和类也是对象,属于p ...

  3. json&pickle

    用于序列化的两个模块 json,用于字符串 和 python数据类型间进行转换pickle,用于python特有的类型 和 python的数据类型间进行转换Json模块提供了四个功能:dumps.du ...

  4. HDU 1197 Specialized Four-Digit Numbers （枚举+进制转化，简单）

    题意:让求从2992-9999中所有数字,满足10进制各位之和和12进制和16进制各位数字之和相等. 析:没啥可说的,只能枚举从2992-9999,每个进制都算一下. 代码如下: #include & ...

  5. 通过wsdl生成client 的几种方式

    wsimport 位置 %JAVA_HOME%/bin/wsimport.exe 帮助 wsimport -help Usage: wsimport [options] <WSDL_URI> ...

  6. C#-VS字符串、日期、时间和时间段

    小知识 哈希表,内存中的对象,用速度很快的哈希表当字典表,记录主键和内容. @,遇到转义字符,不转义,直接输出,即就是.转义字符是反斜杠/ 全部的内置类型都用类和结构描述.值类型用结构,引用类型用类. ...

  7. C++中的关键字用法--- 四种强制类型转换的总结

    四种强制类型转换的总结(const_cast.static_cast.dynamic_cast.reinterpreter_cast 1. C风格的强制类型转换(Type Cast)很简单,不管什么类 ...

  8. Linux 用 sftp scp命令 互传文件

    sftp它类似于 ftp, 但它进行加密传输,比FTP有更高的安全性. sftp 是SSH服务的子程序 常用命令 pwd 查看当前工作目录 ls 查看远程当前目录下的所以文件或者目录信息 lls 查看 ...

  9. 四则运算(Java)--温铭淇，付夏阳

    GitHub项目地址: https://github.com/fxyJAVA/Calculation 四则运算项目要求: 程序处理用户需求的模式为: Myapp.exe -n num -r size ...

  10. 软件工程项目基于java的wc实现

    WC软件工程项目JAVA实现博客 github地址:https://github.com/liudaohu/myrepository.git 功能实现 ·    -w 统计单词数 -c 统计字符数 - ...