vue3.js通过ref的方式获取子元素失败?

在Vue3中，如果使用setup方法来写的话，在父组件中是无法直接通过ref来获取到子组件的实例对象的，也就意味着你再像Vue2那样去获取.

在Vue3中如果想要获取到子组件的方法或属性，需要主动向外暴露，下面写一个简单的例子parent.vue

<template>
<test ref="tt"></text>
</template>
<script setup>
import {ref, onmounted} from "vue";
const tt = ref(null);
onmounted(() => {
    //要获取子组件中的myFun方法
    console.log(tt.value.myFun)
})
</script>

子组件text.vue

<script setup>
import { defineExpose } from "vue";
function myFun() {
  console.log("object");
}
let name = ref("bigNeck");
// 要想父组件可以访问到子组件内的方法，需要主动暴露，使用的是defineExpose方法
defineExpose({
  myFun,
  name,
});
</script>

以上就可以了，也就是说你想要获取子组件哪个方法或属性，都需要主动手动暴露。这也符合Vue3的开发思想，就是按需加载。