vue3用ref使用子组件里面的方法

可以通过在子组件中使用 `emits` 属性来将子组件内部的方法暴露出来，然后在父组件中使用 `ref` 引用子组件，并通过 `value` 属性访问子组件的方法。

例如，在子组件中定义一个方法 `getChildData()`：

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

<script>
export default {
  emits: ['getChildData'],
  methods: {
    getChildData() {
      // 子组件内部的方法
      return '子组件数据'
    }
  }
}
</script>

然后，在父组件中使用 `ref` 引用子组件，并在子组件渲染完成后调用子组件的 `getChildData()` 方法：

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

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

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

    const getChildData = () => {
      const data = childComponent.value.getChildData()
      console.log(data)
    }

    return {
      childComponent,
      getChildData
    }
  }
}
</script>

注意，在父组件中使用 `ref` 引用子组件时，需要将 `ref` 绑定到子组件的根元素上，例如上面的代码中的 `<ChildComponent ref="childComponent" />`。然后在父组件的 `setup()` 函数中，通过 `childComponent.value` 来访问子组件的方法。