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

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>

原文地址:https://www.cnblogs.com/charlypage/p/9902580.html

时间: 2024-10-04 13:56:04

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

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

Vue 组件&amp;组件之间的通信 之 子组件向父组件传值

子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件com-a要获取子组件data中的height属性: 在子组件com-b中,需要用$.emit()方法将数据以事件的形式发送,$.emit('sendData', data, data…),红色的部分事件名可自定义,数据可传递多个: 在父组件中使用子组件的地方 <com-b @自定义事件名='getD

vue--父组件向子组件传参--父组件定义v-bind:参数名--子组件接收props----子组件调用父组件的方法(子组件向父组件传参)父组件@事件名称--子组件接收this.$emit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

组件之间的通信(子组件-改变父组件的值)

在vue中,组件之间的通信,是不建议子组件改变父组件的值,因为一个父组件有可能会有很多子组件,改来改去会很难管理(别人都这样说,我信) 试试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src='../vue.js'> </script> </head> <bod

Taro 中父组件传多个值到子组件, 不同页面传值, 子组件修改父组件值

1.父子组件传值需借助 中间ts文件 hook/context-manager.tsx // 使用hook给父子组件共享数组 import { createContext } from "@tarojs/taro"; export default createContext({}); 2.父组件 import TripContext from '../../hook/context-manager' import Trip_success from '../../components/

父组件给子组件传值,并在子组件里面渲染该数据

用@Component({}) 方式引入子组件JobHeader,dom结构如下: <!-- v-if="allImg.length > 0 " allImg 里面有数组了,再渲染子组件 JobHeader --> <JobHeader ref="jobHeader" v-if=" allImg && allImg.length > 0 " :data="allImg">&l

自定义flex组件使用标签方式添加子组件

一般情况下,当我们写了一个继承自flex组件并往里面添加了子组件,然后想用标签等方式添加子组件时候报错了,那如何解决这一的问题,自定义组件代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">

ExtJs--05--给window组件添加功能条以及子组件获取上级或下级组件的属性和方法

Ext.onReady(function(){ /** 1-- 给容器组件添加控制条 及 控制项 控制条 不同的方向有多种 tbar lbar rbar bbar fbar 2-- 根据组件本身拿到上级组件的属性及方法调用 */ var win = new Ext.window.Window({ id:"id001",//自定义编号 title:"自定义标题信息",//标题 width:400,//宽度 可以使用百分比 自适应浏览器大小 height:400,//高

ExtJs--05--给window组件加入功能条以及子组件获取上级或下级组件的属性和方法

Ext.onReady(function(){ /** 1-- 给容器组件加入控制条 及 控制项 控制条 不同的方向有多种 tbar lbar rbar bbar fbar 2-- 依据组件本身拿到上级组件的属性及方法调用 */ var win = new Ext.window.Window({ id:"id001",//自己定义编号 title:"自己定义标题信息",//标题 width:400,//宽度 能够使用百分比 自适应浏览器大小 height:400,/