码迷,mamicode.com
首页 > Web开发 > 详细

vue.js(19)--vue中子组件调用父组件的方法

时间:2019-08-18 18:08:58      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:--   cli   eth   UNC   直接   组件   方法   nbsp   不能   

子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit(‘自定义方法名‘)语句完成父组件中方法到子组件中的调用,最后直接调用子组件中定义的方法即可。

<div class="app">
        <mycom v-on:func="parentshow"></mycom>
        <!-- 通过v-on:绑定方法将父组件中的方法绑定到func,
            然后在子组件中定义一个方法(this.$emit(‘func‘))将func传递给子组件,
            这样子组件就可以通过自己的方法来调用父组件的方法 -->
    </div>
    <template id="cmp">
        <div>
            <a href="#" @click.prevent="show">快点我</a>
        </div>
    </template>
    <script>
        var vm = new Vue({
        el:.app,
        data:{
            msg:我是父组件的方法
        },
        methods:{
            parentshow(){
                alert(this.msg)
            }
        },
        components:{
            mycom:{
                template:#cmp,
                methods:{
                    show(){
                        this.$emit(func)//通过此方法在子组件建立方法来调用父组件中的方法
                    }
                }
            }
        }
    })  
    </script>

 

vue.js(19)--vue中子组件调用父组件的方法

标签:--   cli   eth   UNC   直接   组件   方法   nbsp   不能   

原文地址:https://www.cnblogs.com/qiqisusu/p/11372950.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!