Vue子组件调用父组件的方法

关于Vue子调用父方法的问题，有三种方法

 

1. 直接在子中通过this.$parent.event来调用父组件的方法

   父组件

<template>
 <div> 
    <child></child>
 </div>
</template>
<script>
import child from '@/child'
export default {
    components:{
        child
    },
    methods:{
        fatherMethod(){
            consologe.log('测试')
        }
    }
}
</script>

　　子组件

<template>
 <div> 
    <button @click='btn'></button>
 </div>
</template>
<script>
export default {
    methods:{
        btn(){
           this.$parent.fatherMethod()
        }
    }
}
</script>

　　

2. 子组件里用​​$emit​​向父组件触发一个事件，父组件监听这个事件就行了。 

     父组件

<template>
 <div> 
    <child @fatherMethod='fatherMethod'></child>
 </div>
</template>
<script>
import child from '@/child'
export default {
    components:{
        child
    },
    methods:{
        fatherMethod(){
            consologe.log('测试')
        }
    }
}
</script>

　　子组件

<template>
 <div> 
    <button @click='btn'></button>
 </div>
</template>
<script>
export default {
    methods:{
        btn(){
           this.$emit.fatherMethod()
        }
    }
}
</script>

　　

3. 父组件把方法传入子组件中，在子组件里直接调用这个方法

    父组件

<template>
 <div> 
    <child :fatherMethod='fatherMethod'></child>
 </div>
</template>
<script>
import child from '@/child'
export default {
    components:{
        child
    },
    methods:{
        fatherMethod(){
            consologe.log('测试')
        }
    }
}
</script>

  子组件

<template>
 <div> 
    <button @click='btn'></button>
 </div>
</template>
<script>
export default {
   props:{
      fatherMethod:{
        type: Function,
        default: null
       }
   }
    methods:{
        btn(){
           if(this.fatherMethod){
               this.fatherMethod
             }
        }
    }
}
</script>