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

在 Vue3 中，你可以通过 `ref` 和 `setup` 来获取子组件的实例，然后调用子组件的方法。以下是示例代码：

<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const child = ref(null)

    return {
      child
    }
  },
  methods: {
    callChildMethod() {
      this.child.value.childMethod()
    }
  }
}
</script>

在子组件中，需要使用 `inject` 来注入父组件的方法。以下是示例代码：

<template>
  <div>
    子组件内容
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const parent = inject('parent')

    const childMethod = () => {
      console.log('调用了子组件方法')
      parent.parentMethod()
    }

    return {
      childMethod
    }
  }
}
</script>

在父组件中，需要使用 `provide` 来提供方法。以下是示例代码：

<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentMethod = () => {
      console.log('调用了父组件方法')
    }

    provide('parent', {
      parentMethod
    })
  }
}
</script>

这样子组件就可以通过注入 `parent` 来调用父组件提供的 `parentMethod` 方法了。