vue3父组件调用子组件

在 Vue3 中，父组件调用子组件可以使用 `ref` 来获取子组件实例，然后通过该实例来调用子组件中的方法或属性。

例如，假设我们有一个父组件 `Parent` 和一个子组件 `Child`，我们想在父组件中调用子组件的方法：

<template>
  <div>
    <button @click="handleClick">调用子组件方法</button>
    <Child ref="childRef" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    handleClick() {
      this.$refs.childRef.childMethod() // 调用子组件中的 childMethod 方法
    }
  }
}
</script>

在上面的例子中，我们在父组件中使用 `ref` 给子组件命名为 `childRef`，然后在 `handleClick` 方法中通过 `this.$refs.childRef` 获取子组件实例，最后调用子组件中的 `childMethod` 方法即可。

需要注意的是，父组件调用子组件的方法时，应该确保子组件已经被渲染出来，否则子组件实例可能还未被创建。可以在 `mounted` 钩子函数中或者使用 `nextTick` 方法来确保子组件已经被渲染出来。