vue子组件调用父组件的三种方法

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

父组件代码 

<template>
    <div>
        <songCompoent></songCompoent>
    </div>
</template>

<script>
    const songCompoent = () => import('@testCp/songCompoent')

    export default {
        methods: {
            fatherFnOne () {
                console.log('我是父方法1')
            },
        },
        components: {
            songCompoent
        },
    }
</script>

子组件代码

<template>
    <div>
        <button @click="sonFn">我是调用父组件方法的按钮</button>
    </div>
</template>

<script>
    export default {
        methods: {
            sonFn () {
                this.$parent.fatherFnOne() // 调用父组件的fatherFnOne方法
            },
        },
    }
</script>

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

父组件代码

<template>
    <div>
        <songCompoent @fatherFn="fatherFnTwo"></songCompoent>
    </div>
</template>

<script>
    const songCompoent = () => import('@testCp/songCompoent')

    export default {
        methods: {
            fatherFnTwo () {
                console.log('我是父方法2')
            },
        },
        components: {
            songCompoent
        },
    }
</script>

子组件代码

<template>
    <div>
        <button @click="sonFn">我是调用父组件方法的按钮</button>
    </div>
</template>

<script>
    export default {
        methods: {
            sonFn () {
                this.$emit('fatherFn') // 调用父组件的fatherFnTwo方法
            },
        },
    }
</script>

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件代码

<template>
    <div>
        <songCompoent :fatherFnThree="fatherFnThree"></songCompoent>
    </div>
</template>

<script>
    const songCompoent = () => import('@testCp/songCompoent')

    export default {
        methods: {
            fatherFnThree () {
                console.log('我是父方法3')
            },
        },
        components: {
            songCompoent
        },
    }
</script>

子组件代码

<template>
    <div>
        <button @click="sonFn">我是调用父组件方法的按钮</button>
    </div>
</template>

<script>
    export default {
        props: { // String Number Boolean Array Object Function || validator (value) {}
            fatherFnThree: { // 父组件传过来的方法 fatherFnThree
                type: Function,
                required: false,
                default: function () {

                }
            },

        },
        methods: {
            sonFn () {
                this.fatherFnThree() // 调用父组件的fatherFnThree方法
            },
        },
    }
</script>

综合代码

父组件

<template>
    <div>
        <songCompoent @fatherFn="fatherFnTwo" :fatherFnThree="fatherFnThree"></songCompoent>
    </div>
</template>

<script>
    const songCompoent = () => import('@testCp/songCompoent')

    export default {
        methods: {
            fatherFnOne () {
                console.log('我是父方法1')
            },
            fatherFnTwo () {
                console.log('我是父方法2')
            },
            fatherFnThree () {
                console.log('我是父方法3')
            },
        },
        components: {
            songCompoent
        },
    }
</script>

子组件

<template>
    <div>
        <button @click="sonFn">我是调用父组件方法的按钮</button>
    </div>
</template>

<script>
    export default {
        props: { // String Number Boolean Array Object Function || validator (value) {}
            fatherFnThree: { // 父组件传过来的方法 fatherFnThree
                type: Function,
                required: false,
                default: function () {

                }
            },

        },
        methods: {
            sonFn () {
                this.$parent.fatherFnOne() // 调用父组件的fatherFnOne方法
                this.$emit('fatherFn') // 调用父组件的fatherFnTwo方法
                this.fatherFnThree() // 调用父组件的fatherFnThree方法
            },
        },
    }
</script>