Vue-子组件传值父组件-本地存储实现评论

Vue-子组件传值父组件实现评论

效果图

把子组件的传值到父组件，点击发表评论把数据渲染到页面，把数据存到内存，刷新页面数据不会消失

子组件调用父组件的方法
1. 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
2. 子组件可以触发这个事件$emit(‘事件名字’）

父组件

  <!-- 父组件 -->
    <div id='app'>
        <div class="container">
        //父组件引用的子组件注册一个事件(这个事件的名字是自定义的)
        //@getlist
            <son @getlist="getlist"></son>
            <ul class="list-group">
                <li class="list-group-item" v-for="(item,index) in list" :key="index">
                    {{item.text}}
                    <span class="badge">评论人：{{item.name}}</span>
                </li>
            </ul>
        </div>
    </div>

子组件

 <!-- 子组件 -->
    <template id="son">
        <div>
            <div class="form-group">
                <label class="" for="">评论人</label>
                <input type="text" class="form-control" id="" placeholder="Input field" v-model="name">
            </div>
            <div class="form-group">
                <label class="" for="">评论内容</label>
                <input type="text" class="form-control" id="" placeholder="Input field" v-model="text">
            </div>
            <button type="button" class="btn btn-info" @click="comment">发表评论</button>
        </div>
    </template>

  <script>
        console.log(localStorage);

        Vue.component('son', {
            template: '#son',
            data() {
                return {
                    name: '',
                    text: '',
                }
            },
            methods: {
                comment() {
                    if (this.name && this.text != '') {
                        var obj = {
                            name: this.name,
                            text: this.text,
                        }
                        //子组件可以触发这个事件$emit('事件名字')
                        this.$emit('getlist', obj)
                        this.name = ''
                        this.text = ''
                        // console.log(localStorage.getItem('val',this.list));
                    }else {
                        alert('评论人和评论内容不能为空')
                    }
                }
            },
        })
        const vm = new Vue({
            el: '#app',
            data: {
                list: [],
            },
            methods: {
                getlist(data) {
                    console.log(data);
                    this.list.push(data)
                    //把数据存到内存
                    localStorage.setItem('val', JSON.stringify(this.list))
                    console.log(this.list);
                }
            },
            created() {
            //判断内存是否为空
                if (localStorage.val) {
                    console.log(JSON.parse(localStorage.getItem('val')));
                    //把数据从内存渲染到页面，刷新页面数据不会显示
                    this.list = JSON.parse(localStorage.getItem('val'))
                }
            }
        })
    </script>