您可以使用参考

import ChildForm from './components/ChildForm'

new Vue({
  el: '#app',
  data: {
    item: {}
  },
  template: `
  <div>
     <ChildForm :item="item" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.$refs.form.submit()
    }
  },
  components: { ChildForm },
})

如果你不喜欢紧耦合，你可以使用事件总线，如@Yosvel Quintero所示。下面是另一个使用事件总线的例子，通过将总线作为 prop 传递。

import ChildForm from './components/ChildForm'

new Vue({
  el: '#app',
  data: {
    item: {},
    bus: new Vue(),
  },
  template: `
  <div>
     <ChildForm :item="item" :bus="bus" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.bus.$emit('submit')
    }
  },
  components: { ChildForm },
})

组件的代码。

<template>
 ...
</template>

<script>
export default {
  name: 'NowForm',
  props: ['item', 'bus'],
  methods: {
    submit() {
        ...
    }
  },
  mounted() {
    this.bus.$on('submit', this.submit)
  },  
}
</script>

https://code.luasoftware.com/tutorials/vuejs/parent-call-child-component-method/

适用于Vue 2.7和Vue 3.2.x

<!-- Parent -->
<script setup>
import { ref, onMounted } from 'vue'
import ChildComponent from './components/ChildComponent.vue'

const childComponentRef = ref()

onMounted(() => {
    childComponentRef.value.doSomething()
})
</script>

<template>
    <ChildComponent ref="childComponentRef" />
</template>

脚本设置

<!-- Child -->
<script setup>
const doSomething = () => {
    console.log('Im batman')
}

defineExpose({
    doSomething
})
</script>

设置功能

<!-- Child -->
<script>
import { defineComponent } from 'vue'

export default defineComponent({
    setup(props, context) {
        const doSomething = () => {
            console.log('Im batman')
        }

        context.expose({ doSomething })
    }
})
</script>

VueJS中的父子通信

假设所有后代都可以通过this.$root访问一个根Vue示例，父组件可以通过this.$children数组访问子组件，子组件可以通过this.$parent访问其父组件，那么您的第一React可能是直接访问这些组件。
VueJS文档特别警告不要这样做，原因有两个：

• 它将父级与子级紧密耦合（反之亦然）
• 您不能依赖父组件的状态，因为它可以被子组件修改。

解决方案是使用Vue的自定义事件接口

Vue实现的事件接口允许您在组件树中上下通信。利用自定义事件接口，您可以访问四种方法：

1. $on()-允许您在Vue示例上声明侦听器，用于侦听事件
2. $emit()-允许在同一示例（自身）上触发事件

使用$on()和$emit()的示例：

第一个

答案摘自原帖：Communicating between components in VueJS

建议的解决方案适用于Vue 2，但如果您最终在此处寻找Vue 3组合API解决方案，则可以在迁移时执行以下操作：
模板中具有方法“doSomething”的子组件：

<div class="form">                                                                                                                                                        
      <child-component ref="childComponentRef" />                                                                      
</div>

使用Vue 2：

this.$refs.childComponentRef.doSomething( );

使用Vue 3组成API：

setup( )
    {
        const childComponentRef = ref( );

        childComponentRef.value.doSomething( )

        return {
           childComponentRef
        }
     }

当你的控件呈现受到v-if的影响时，Ref和事件总线都有问题。
这个想法是使用一个数组作为队列，将需要调用的方法发送给子组件。一旦组件被挂载，它将处理这个队列。它监视队列以执行新的方法。
（借用Desmond Lua回答中的一些代码）
父组件代码：

import ChildComponent from './components/ChildComponent'

new Vue({
  el: '#app',
  data: {
    item: {},
    childMethodsQueue: [],
  },
  template: `
  <div>
     <ChildComponent :item="item" :methods-queue="childMethodsQueue" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.childMethodsQueue.push({name: ChildComponent.methods.save.name, params: {}})
    }
  },
  components: { ChildComponent },
})

这是ChildComponent代码

<template>
 ...
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    methodsQueue: { type: Array },
  },
  watch: {
    methodsQueue: function () {
      this.processMethodsQueue()
    },
  },
  mounted() {
    this.processMethodsQueue()
  },
  methods: {
    save() {
        console.log("Child saved...")
    },
    processMethodsQueue() {
      if (!this.methodsQueue) return
      let len = this.methodsQueue.length
      for (let i = 0; i < len; i++) {
        let method = this.methodsQueue.shift()
        this[method.name](method.params)
      }
    },
  },
}
</script>

而且还有很大的改进空间，比如将processMethodsQueue移到mixin中。

我喜欢mohghaderi的答案，但是我遇到了一些问题，所以我将使用他的示例代码来显示我需要做的修改，以便它工作。（在我自己的项目中，我使用的是Vue 3和Options API。）

mohghaderi的父组件代码以及有关我的更改的注解：

import ChildComponent from './components/ChildComponent'

new Vue({
  el: '#app',
  data: {
    item: {},
    childMethodsQueue: [],
  },
  // Note: In the template below, I added @child-methods-finished="childMethodsFinished" 
  //       as an event listener, so that we can reset the childMethodsQueue array to
  //       empty once the methods are finished.
  //       If you don't reset it, then the methods stay in there and cause problems.
  template: `
  <div>
     <ChildComponent :item="item" 
                     :methods-queue="childMethodsQueue"
                     @child-methods-finished="childMethodsFinished" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.childMethodsQueue.push({
        name: ChildComponent.methods.save.name,
        params: {}  // Note: delete the {} and put the name of your params, if you use a method that passes in params.
      })
    }
  },
  components: { ChildComponent },
})

mohghaderi的子组件代码以及有关我的更改的注解：

import { objectToString } from "@vue/shared"

export default {
    name: 'ChildComponent',
    props: {
      methodsQueue: { type: Array },
    },
    // Note:  I had to rewrite the watch option because it would not trigger.
    //        You have to add "deep, true" for arrays and objects.
    //        The function has to be called "handler" for it to work as well.
    watch: {
      methodsQueue: {
        handler() {
          this.processMethodsQueue()
        },
        deep: true,
      }
    },
    // Note:  Remove "mounted()" function if you don't want it to run on the mounted event.
    mounted() {
      this.processMethodsQueue()
    },
    methods: {
      save() {
          console.log("Child saved...")
      }, 
      processMethodsQueue() {
        if (!this.methodsQueue) return
        let len = this.methodsQueue.length

        if (!len) return  // Note:  This is required to prevent an infinite loop.
                          //        When we reset the childMethodsQueue array to empty,
                          //        it will trigger this method through the watch option,
                          //        so we need this in order to stop the cycle once we are done.

        // Note:  Instead of using ".shift()" to access an item in the array
        //        we need to use "[i]" otherwise we will get muliple calls of the method
        for (let i = 0; i < len; i++) {
          let method = this.methodsQueue[i]
          this[method.name](method.params)
        }

        // Note:  Now that we are done calling methods, we need to emit an event back to the parent
        //        so it can call it's method to reset the childMethodsQueue array to empty
        this.$emit('child-methods-finished')
      },
    },
  }

为了使一个子组件与另一个子组件进行通信，我在parent中创建了一个方法，该方法使用以下命令调用子组件中的方法：

this.$refs.childRef.childMethod()

childRef是子组件的引用，childMethod可以替换为子组件中的任何方法。
从另一个子函数调用root方法：

this.$root.theParentMethod() // It works with Bootstrap Vue
this.$parent.theParentMethod()

对我很有效。