01 vue子组件调用父组件中的方法

vue子组件，调用父组件中有三种方法哈！下面我们一起来讲解。

第一种使用直接在子组件中通过this.$parent.父组件中的方法。来调用父组件的方法

第一种的缺点是不能够传递参数哈。它只能够调用方法。

子组件.vue
<template>
    <div @click="fa">
        我是子组件
    </div>
</template>

<script>
    export default {
        methods:{
            fa(){
                // 第一种 直接在子组件中通过this.$parent.父组件中的方法  来调用父组件的方法
               this.$parent.fatherMethod('op');//父组件中有这一个方法fatherMethod     
            }
        }
    }
</script>

父组件.vue
 methods:{
            fatherMethod(){
                console.log("被子组件触发了")
            }
 }

第二种

方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了可以传递参数

第三种

子组件.vue
<template>
    <div @click="mychild()">
        我是子组件
    </div>
</template>

<script>
    export default {
        props: {
            say: {
                type: Function,
                default: null
            }
        },
        methods:{
                // 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法
                mychild(){
                    if (this.say) {
                        this.say();
                    }
                }
        }
    }
</script>

父组件
<zidiaoyongfa :say="say"></zidiaoyongfa>

 say(){
      console.log("haha  我要说话")
  }

作者：明月人倚楼

出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

支付宝

微信

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接

如果文中有什么错误，欢迎指出。以免更多的人被误导。