vue中子组件调用父组件的方法，这里总结了三种：
1.直接在子组件中通过this.$parent.event来调用父组件的方法
Parent.vue
<template> <div> <child></child> </div></template><script> import Child from '../../components/Child.vue'; export default { data() { return { name: 'Parent', }; }, methods: { fatherMethod() { console.log('testing'); }, }, components: { child: Child, }, };</script><style scoped></style>Child.vue
<template> <div> <button @click="childMethod">点击调用父组件方法</button> </div></template><script> export default { data() { return { name: 'Child', }; }, methods: { childMethod() { this.$parent.fatherMethod(); }, }, };</script><style scoped></style>2.在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了
Parent.vue
<template> <div> <child v-on:fatherMethod="fatherMethod"></child> </div></template><script> import Child from '../../components/Child.vue'; export default { data() { return { name: 'Parent', }; }, methods: { fatherMethod() { console.log('testing'); }, }, components: { child: Child, }, };</script><style scoped></style>Child.vue
<template> <div> <button @click="childMethod">点击调用父组件方法</button> </div></template><script> export default { data() { return { name: 'Child', }; }, methods: { childMethod() { // this.$parent.fatherMethod(); this.$emit('fatherMethod'); }, }, };</script><style scoped></style>3.父组件把方法传入子组件中，在子组件里直接调用这个方法
Parent.vue
<template> <div> <child :fatherMethod="fatherMethod"></child> </div></template><script> import Child from '../../components/Child.vue'; export default { data() { return { name: 'Parent', }; }, methods: { fatherMethod() { console.log('testing'); }, }, components: { child: Child, }, };</script><style scoped></style>Child.vue
<template> <div> <button @click="childMethod">点击调用父组件方法</button> </div></template><script> export default { props: { fatherMethod: { type: Function, default: null, }, }, data() { return { name: 'Child', }; }, methods: { childMethod() { // this.$parent.fatherMethod(); // this.$emit('fatherMethod'); this.fatherMethod(); }, }, };</script><style scoped></style>