本教程操作环境：windows7系统、vue2.9.6版，dell g3电脑。
vue中子组件调用父组件的方法，这里有三种方法提供参考
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
父组件
<template> <p> <child></child> </p></template><script> import child from '~/components/dam/child'; export default { components: { child }, methods: { fathermethod() { console.log('测试'); } } };</script>
子组件
<template> <p> <button @click="childmethod()">点击</button> </p></template><script> export default { methods: { childmethod() { this.$parent.fathermethod(); } } };</script>
第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
父组件
<template> <p> <child @fathermethod="fathermethod"></child> </p></template><script> import child from '~/components/dam/child'; export default { components: { child }, methods: { fathermethod() { console.log('测试'); } } };</script>
子组件
<template> <p> <button @click="childmethod()">点击</button> </p></template><script> export default { methods: { childmethod() { this.$emit('fathermethod'); } } };</script>
第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法
父组件
<template> <p> <child :fathermethod="fathermethod"></child> </p></template><script> import child from '~/components/dam/child'; export default { components: { child }, methods: { fathermethod() { console.log('测试'); } } };</script>
子组件
<template> <p> <button @click="childmethod()">点击</button> </p></template><script> export default { props: { fathermethod: { type: function, default: null } }, methods: { childmethod() { if (this.fathermethod) { this.fathermethod(); } } } };</script>
【相关推荐：vue.js教程】
以上就是vue子组件怎么调用父组件的方法的详细内容。