vue3组件怎么调用子组件的方法

在Vue3中，如果父组件想要调用子组件的方法，可以通过`ref`和`value`属性来实现。具体步骤如下：
1. 在子组件中，使用`defineExpose`方法将需要暴露给父组件的方法暴露出来。
2. 在父组件中，使用`ref`获取子组件的实例，并通过`value`属性访问子组件的方法。

下面是一个示例代码：

子组件：

<template>
  <div>{{ name }}</div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      name: '测试'
    };
  },
  methods: {
    childMethods() {
      console.log(this.name);
    }
  },
  // 将需要暴露给父组件的方法暴露出来
  setup(props, { expose }) {
    expose({
      childMethods: this.childMethods
    });
  }
});
</script>

父组件：

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

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

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

    const callChildMethod = () => {
      childRef.value.childMethods();
    };

    return {
      childRef,
      callChildMethod
    };
  }
};
</script>