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. 51Nod 1376 最长递增子序列的数量 (DP+BIT)

    题意:略. 析:dp[i] 表示以第 i 个数结尾的LIS的长度和数量,状态方程很好转移,先说长度 dp[i] = max { dp[j] + 1 | a[i] > a[j] && ...

  2. Oracle之SQL语句性能优化（34条优化方法）

    (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处 ...

  3. qq强制聊天工具

    当你想和别人聊天, 别人有不理你的时候可以用上哦!!!特别是情人吵架的时候, 呵呵 复制下面的代码: @echo off title DIY-QQ强制聊天工具color 0a echo. echo.  ...

  4. 用python实现各种排序算法

    最简单的排序有三种:插入排序,选择排序和冒泡排序.它们的平均时间复杂度均为O(n^2),在这里对原理就不加赘述了. 贴出源代码: 插入排序: def insertion_sort(sort_list) ...

  5. TurtleBot教程

    TurtleBot TurtleBot combines popular off-the-shelf robot components like the iRobot Create, Yujin Ro ...

  6. （水题） Div 3 -- SGU -- 105

    链接: http://vj.acmclub.cn/contest/view.action?cid=168#problem/E 时限:250MS     内存:4096KB     64位IO格式:%I ...

  7. lock wait timeout exceeded; try restarting transactio解决方案

    问题原因:       今天线上环境,突然出现一个问题,追踪原因是数据库中的一条语句报错,错误内容:lock wait timeout exceeded; try restarting transac ...

  8. [jquery-ajax] jquery ajax 三种情况对比

    <button class="btn1">async:false</button> <button class="btn2"> ...

  9. 主程序与DLL之间的全局变量问题

    http://www.cnblogs.com/railgunman/archive/2010/11/29/1891200.html 主程序与DLL之间的全局变量问题   有几个朋友经常向我问题在DLL ...

  10. 将Heap RID转换成RID格式

    使用DBCC PAGE命令查看索引叶子层中的索引键(最后一个参数为3才会显示索引键对应的HEAP RID)时,可以使用下面的SQL将HEAP RID转换成 FileId:PageId:SlotNo的格 ...