vue3.js通过ref的方式获取子元素失败?-灵析社区
脑袋困掉惹vue3.js通过ref的方式获取子元素失败 Html `` js: import test from './test.vue' const testdata = ref(null); onMounted(() => { console.log(testdata.value,'testdata') }) 打印出来为null
HAO起起在Vue3中，如果使用setup方法来写的话，在父组件中是无法直接通过ref来获取到子组件的实例对象的，也就意味着你再像Vue2那样去获取.
在Vue3中如果想要获取到子组件的方法或属性，需要主动向外暴露，下面写一个简单的例子
parent.vue
import {ref, onmounted} from "vue";
const tt = ref(null);
onmounted(() => {
//要获取子组件中的myFun方法
console.log(tt.value.myFun)
})
子组件text.vue
import { defineExpose } from "vue";
function myFun() {
console.log("object");
}
let name = ref("bigNeck");
// 要想父组件可以访问到子组件内的方法，需要主动暴露，使用的是defineExpose方法
defineExpose({
myFun,
name,
});
以上就可以了，也就是说你想要获取子组件哪个方法或属性，都需要主动手动暴露。这也符合Vue3的开发思想，就是按需加载。