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. gj6 深入python的set和dict

    6.1 collections中的abc from collections.abc import Mapping, MutableMapping #dict属于mapping类型 a = {} pri ...

  2. 继承方法-->最终模式

    function inherit(Target,Origin){ function F(){}; F.prototype = Origin.prototype; // Targrt.prototype ...

  3. SPSS—非线性回归(模型表达式)案例解析

    非线性回归过程是用来建立因变量与一组自变量之间的非线性关系,它不像线性模型那样有众多的假设条件,可以在自变量和因变量之间建立任何形式的模型    非线性,能够通过变量转换成为线性模型——称之为本质线性 ...

  4. The serializable class XXX does not declare a static final serialVersionUID field of type long

    问题: 在Eclipse中,继承类时,总是提示下面的警告(Warning),按理说警告是没有关系的,但是程序看起来老不爽了,这是强迫症的关系(呵呵) The serializable class XX ...

  5. spring boot打包后windows启动乱码

    事情的起因什么的就不多表了,直接进入主题... 项目都要上线了,结果发现使用 idea mvn install之后的 jar在windows下启动乱码,而使用idea启动却没有问题!!! 这是神马情况 ...

  6. 股票——成交量加权平均价VWAP

    成交量加权平均价是将多笔交易的价格按各自的成交量加权而算出的平均价,若是计算某一证券在某交易日的VWAP,将当日成交总值除以总成交量即可.VWAP可作为交易定价的一种方法,亦可作为衡量机构投资者或交易 ...

  7. Bug中的中的小问题编程需要注意

    Bug中的中的小问题编程需要注意 1. 关于局部变量与全局变量是否同名问题 如果参数传递的是一个数组,且全局变量与参数数据同名,则局部变量作用域中,这两个同名的数据可能会引起冲突. 如下:如果一开始是 ...

  8. hdu 2049 不容易系列之考新郎 && 对错排的详解

    题目 错排:  当n个编号元素放在n个编号位置,错排的方法数记着D(n) ⒈把第n个元素放在一个位置,比如位置k,一共有(n-1)种方法: ⒉放编号为k的元素,这时有两种情况: 1°把它放到位置n,那 ...

  9. ASP.NET Core使用Elasticsearch记录NLog日志

    ASP.NET Core使用Elasticsearch记录NLog日志 1.新建一个 ASP.NET Core项目 2.安装Nuge包 运行:Install-Package NLog.Web.AspN ...

  10. Win(Phone)10开发第(4)弹，HTTP 实时流播放 m3u8

    其实这篇只有一句话,win10原生支持HLS啦 1 2 3 AdaptiveMediaSourceCreationResult amsResult = await AdaptiveMediaSourc ...