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

最新推荐文章于 2024-06-19 15:12:15 发布

行尽江南

最新推荐文章于 2024-06-19 15:12:15 发布

阅读量294

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43209953/article/details/86499211

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了在Vue.js中如何从子组件正确地调用父组件的方法，包括使用`$emit`事件触发器和props进行通信，以及在实际开发中应注意的注意事项，帮助开发者更好地理解和掌握组件间通信。

摘要由CSDN通过智能技术生成

<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
            }
        })