vue3中ref绑定自定义组件没有获取到dom?

Question

<my-comp ref="test"></my-comp>

const test = ref()

onMounted(() => {
    console.log(test.value)
})

打印出来的是一个proxy对象

如果ref绑定的是一个普通的dom元素，就能打印出来dom对象。
请问，如何ref如何绑定自定义组件？

---

还是写一下如何解决的吧，如果是组件，在子组件中绑定ref之后还需要用defineExpose暴露出来，如果想调用子组件的方法，也需要暴露出来方法。

// 父组件
<my-comp ref="test"></my-comp>

const test = ref()

onMounted(() => {
    console.log(test.value.a)
})

// 子组件
<div ref="a"></div>
const a = ref()
defineExpose({a})

---

再追加一下另一种方法

const dom = ref();

onMounted(() => {
    console.log(dom.value.ref);
});

<el-button ref="dom">xxx</el-button>

Answer 1

你的绑定写法是正确的，打印出来的确实是个 proxy 对象，即 my-comp 组件实例。
你要获取 my-comp 组件里的 DOM 元素，在 my-comp 组件里一样绑 ref 就行了。

// my-comp.vue
<div ref="childrenRef"></div>

const childrenRef = ref();


// 父组件访问
console.log(test.value.childrenRef);