Ref 不适用于 Vue3 中的自定义组件

Question

我正在使用 Vue3 和组合 API。在表单组件中，我在每个字段（子组件）上放置了引用。

\n

由于某些原因，ref自定义组件的 与refQuasar 组件的 不同。

\n

当我console.log使用ref自定义组件时，我在 DevTools 中得到以下信息：

\n

Proxy\xc2\xa0{__v_skip: true}   \n

\n

（Target 中没有任何属性）

\n

而对 Quasar 组件的引用给出了：

\n

Proxy\xc2\xa0{\xe2\x80\xa6}  \n

\n

（包含 Target 中组件的所有属性）

\n

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

\n

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

\n

知道如何解决这个问题吗？

\n

更新\n如果我defineExpose在子组件中使用我想使用 a 从外部访问的属性和方法ref，它确实有效。但不太方便，因为这些组件有很多道具。

\n

Answer 1

如果您的组件是由 Composition API ( ) 编写的，那么目前您似乎无法通过 ref 访问自定义组件<script setup>。不过你可以试试我下面提到的方法。

在 Vue 3 文档中，有几行提到了这种行为：

这里的一个例外是，默认情况下<script setup>，组件 using是私有的 ：引用子组件 using 的父组件 将无法访问任何内容，除非子组件选择使用宏公开公共 接口<script setup>defineExpose

在这里阅读更多内容：Vue 3 - 组件参考

这意味着如果您想从自定义组件访问任何内容，您的组件必须公开该信息。我认为这是因为在 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>