vue.js - Ref 不适用于 Vue3 中的自定义组件

Question

我将 Vue3 与组合 API 结合使用。在表单组件中，我将 ref 放在每个字段(子组件)上。

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

当我 console.log 一个自定义组件的 ref 时，我在 DevTools 中得到了这个:

Proxy {__v_skip: true}   

(在 Target 中没有任何属性)

虽然对 Quasar 组件的引用给出了这个:

Proxy {…}  

(具有 Target 中组件的所有属性)

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

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

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

更新如果我在子组件中使用 defineExpose 来获取我想通过 ref 从外部访问的属性和方法，它确实有效。虽然不是很方便，因为这些组件有 很多 Prop 。

Answer 1

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

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

An exception here is that components using <script setup> are privateby default: a parent component referencing a child component using<script setup> won't be able to access anything unless the childcomponent chooses to expose a public interface using the defineExposemacro

在这里阅读更多: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>