Vue3中自定义组件中Ref无法工作。

Question

我正在使用具有组合式 API 的 Vue3。 在表单组件中，我在每个字段（子组件）上放置了 ref。 由于某种原因，自定义组件的“ref”与 Quasar 组件的“ref”不同。 当我向自定义组件的“ref”打印日志时，在 DevTools 中会得到以下结果：

Proxy {__v_skip: true}   

（没有目标属性） 当引用 Quasar 组件时，会得到以下内容：

Proxy {…}  

(包括目标组件的所有属性)

因此，我无法使用ref来访问这些子组件的属性或方法。

我不知道__v_skip是什么意思。我的自定义组件是用script setup定义的，这可能是原因吗？

你有什么解决办法吗？

更新：如果在子组件中使用defineExpose指定想要用ref从外部访问的属性和方法，则可以解决问题。但这并不方便，因为这些组件有很多props。

- Dylan

---

你正在处理错误的事情。如果你有问题，请考虑解释并提供 https://stackoverflow.com/help/mcve。你不应该关注Vue内部属性。引用的不同表示可能表明它们被错误地使用，但没有足够的理由认为这是错的。 - Estus Flask

Answer 1

目前似乎无法通过引用(ref)访问使用Composition API (<script setup>)编写的自定义组件。但是你可以尝试下面我提到的方法。 在Vue3文档中提到了这种行为: “例外情况是，使用<script setup>的组件默认情况下是私有的:引用使用<script setup>的子组件的父组件将无法访问除非子组件选择使用defineExpose宏公开公共接口。” 点击链接查看更多: Vue 3 - Ref on Component 这意味着如果要访问自定义组件中的任何内容，则必须暴露该信息。我认为这是因为在Vue 3中不再需要根组件，因此如果定义一个引用(ref)，Vue就不知道要引用哪个组件。 但是... 你可以尝试使用yourRef.value.$el，也许会有所帮助。 例如：

// Parent.vue
<template>
  <Child ref="childRef">
</template>

<script setup lang="ts">
// Import things...

const childRef = ref<InstanceType<typeof Child> | null>(null);

onMounted(() => {
  console.log(childRef.value.$el); 
});
</script>

- juzser

---

只有原始的vue defineExpose方法有效。 - AbdulGafar Olamide Ajao