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 来访问子组件的方法。