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

Posted qiqisusu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js(19)--vue中子组件调用父组件的方法相关的知识,希望对你有一定的参考价值。

子组件是不能直接使用父组件中的方法的,需要进行事件绑定(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中子组件调用父组件的方法的主要内容,如果未能解决你的问题,请参考以下文章

vue.js中子组件触发父组件的方法

Vue.js2.0中子组件修改父组件传递过来的props,并不影响父组件的原始数据

Vue.js中子组件中迭代槽的迭代槽内容

从子组件调用父函数会在 Vue.js 中引发错误

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

发出的事件不会调用 Vue JS 组件中的父方法