vue 子组件使用父组件的函数

<body>
    <div id="app">

            <com1 @func="loadComments"></com1>

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


    </div>
    <template id="tem">
        <div>
            <div class="form-group">
                <label for="">评论人:</label>
                <input type="text" class="form-control" v-model="user">
            </div>
            <div class="form-group">
                <label for="">评论内容:</label>
                <textarea type="text" class="form-control" v-model="content"></textarea>
            </div>

            <input type="button" value="添加评论"  @click="add()" class="form-control btn-primary">

        </div>
    </template>


    <script src="vue.js"></script>
    <script src="vue-resource.min.js"></script>
<script>
        var com1={
                template:'#tem',
                data:function(){
                    return {
                        user:'',
                        content:''
                    }
                },
                methods:{
                    add:function(){
                        var object={id:Date.now()-1,user:this.user,content:this.content};
                        var list=JSON.parse(localStorage.getItem('com1') || '[]');
                        list.unshift(object);
                        localStorage.setItem('com1',JSON.stringify(list));
                        this.user=this.content='';
                        this.$emit('func');
                    }
                },
                prop:{

                }


            };

        new Vue({
            el:'#app',
            data:{
                list:[
                    { id: Date.now(), user: '司马迁', content: '欲加之罪！' },
                    { id: Date.now()+1, user: '庄子', content: '水击千里！' },
                    { id: Date.now()+2, user: '刘庄', content: '美女很多！' }
                ]
            },
            created:function(){
                this.loadComments();
            },
            methods:{
                loadComments:function() {
                    this.list = list = JSON.parse(localStorage.getItem('com1') || '[]');
                }
            },
            components:{
                com1
            }
        })
vue 子组件使用父组件的函数

猜你喜欢
