vue——33-父子组件传方法（发表评论） 及 localStorage 的应用

版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83096747

引入文件：bootstrap.css

html

<div id="app">
    <cmt-box @func="loadComments"></cmt-box>

    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item.id">
            <span class="badge">评论人：{{item.name}}</span>
            {{item.content}}
        </li>
    </ul>
</div>

<template id="tmp1">
    <div>
        <div class="form-group">
            <label for="user">评论人：</label>
            <input type="text" id="user" class="form-control" v-model="name">
        </div>

        <div class="form-group">
            <label for="connect">评论内容：</label>
            <input type="text" id="connect" class="form-control" v-model="content">
        </div>

        <div class="form-group">
            <input type="button" class="btn btn-primary" value="发表评论" @click="postComment">
        </div>
    </div>
</template>

js

        let commentBox = {
            template: '#tmp1',
            data() {
                return {
                    name: '',
                    content: ''
                }
            },
            methods: {
                postComment() {
                    //发表评论的方法
                    // 1.评论存放进 localStorage 中 localStorage.setItem('','')
                    // 2.先组织出一个最新的评论数据对象
                    // 3.想办法，把第二步中，得到的评论对象，保存到 localStorage 中；
                    //  3.1.localStorage 只支持存放字符串数据，要先调用 JSON.stringify
                    //  3.2.在保存最新的评论数据之前，要先从 localStorage 获取到之前的评论数
                    //  据（string），转换为一个数组对象，然后，把最新的评论，push 到这个数组
                    //  3.3.如果获取到的 localStorage 中的评论字符串，为空不存在，
                    //  则可以返回一个 '[]' 让 JSON.parse 去转换
                    //  3.4.把最新的评论列表组，再次调用 JSON.stringify 转为数组字符串，
                    //  然后调用 localStorage.setItem()

                    let comment = {id: Date.now(), name: this.name, content: this.content};

                    // 从 localStorage 中获取所有的评论
                    let list = JSON.parse(localStorage.getItem('cmts') || '[]');
                    list.unshift(comment);
                    // 重新保存最新的评论数据
                    localStorage.setItem('cmts', JSON.stringify(list));
                    this.name = this.content = '';

                    this.$emit('func');//触发这个事件
                }
            }
        };

        let vm = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {
                loadComments() {
                    //从本地的 localStorage 中，加载评论列表
                    this.list = JSON.parse(localStorage.getItem('cmts') || '[]');
                }
            },
            components: {
                cmtBox: commentBox
            },
            created() {
                this.loadComments();
            },
        });