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

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

Vue中子组件调用父组件的方法，这里有三种方法提供参考。

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

父组件：

<template>
    <div>
        <child></child>
    </div>
</template>

<script>
import child from '~/components/dam/child';
export default {
    components: {
        child
    },
    methods: {
        fatherMethod() {
            console.log('测试');
        }
   }
};
</script>

子组件：

<template>
    <div>
        <button @click="childMethod()">点击</button>
   </div>
</template>

<script>
    export default {
        methods: {
            childMethod() {
                this.$parent.fatherMethod();
            }
        }
    };

</script>

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

父组件：

<template>
    <div>
        <child @fatherMethod="fatherMethod"></child>
    </div>
</template>

<script>
    import child from '~/components/dam/child';
    export default {
        components: {
            child
        },
        methods: {
            fatherMethod() {
                console.log('测试');
            }
        }
    };
</script>

子组件：

<template>
    <div>
        <button @click="childMethod()">点击</button>
    </div>
</template>

<script>
    export default {
        methods: {
            childMethod() {
                this.$emit('fatherMethod');
            }
        }
    };

</script>

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

父组件

<template>
    <div>
        <child :fatherMethod="fatherMethod"></child>
    </div>
</template>

<script>
import child from '~/components/dam/child';
export default {
    components: {
        child
    },
    methods: {
        fatherMethod() {
            console.log('测试');
        }
    }
};

</script>

子组件

<template>
    <div>
        <button @click="childMethod()">点击</button>
    </div>
</template>

<script>
    export default {
        props: {
            fatherMethod: {
                type: Function,
                default: null
            }
        },
        methods: {
            childMethod() {
                if (this.fatherMethod) {
                    this.fatherMethod();
                }
            }
        }
    };
</script>