主页 / user-12769644

Vins's questions

Martin Hope
Vins
Asked: 2024-11-19 02:17:49 +0800 CST
  • 6

我正在使用 Composition API 和useTemplateRefsList来自的函数开发递归 Vue 3 组件@vueuse/core。

我的目标是收集对递归组件的每个实例的引用。但是，我很难正确输入引用列表，因为thisComposition API 中没有该关键字。

这是我的设置的简化版本：

// toto.vue
<template>
  {{ data.name }}
  <toto 
   v-for="item in data.children"
   ref="childRefs"
   :key="item.id"
   :data="item.children"
  />
</template>

<script setup lang="ts">
import { useTemplateRefsList } from '@vueuse/core';

const { data } = defineProps<{
  id: string;
  name: string;
  children?: [
   {
     id: string;
     name: string,
     children?: [...]
   }
  ]
}>();

// Attempting to type the refs list
const childRefs = useTemplateRefsList</* What type goes here? */>();
</script>

问题

我想要输入childRefs以便它正确地表示递归组件实例的数组。

由于this脚本设置语法中不可用，因此我无法直接引用组件的实例类型。

我尝试过的方法

  1. 使用ComponentPublicInstance：
const refs = useTemplateRefsList<ComponentPublicInstance>();

但是这种类型太通用并且不能反映递归组件的实际实例。

  1. 使用InstanceType：
const refs = useTemplateRefsList<InstanceType<typeof RecursiveComponent>>();

然而，RecursiveComponent 在其自身声明期间尚未定义，这产生了循环依赖问题。

  1. 通过输入expose

我考虑过使用 defineExpose 来公开属性/方法并针对它们输入类型，但对于一个简单的递归组件来说，这感觉有点小题大做。

  1. 从另一个导出类型ts file
// definitionsFile.ts
import Toto from './Toto.vue';

// Without using an object, I get the following error: Type alias 'TotoType' circularly references itself.
export type TotoType = { a: InstanceType<typeof PermissionSummaryRow> };

// toto.vue
import Toto from './Toto.vue';

// 'childRefs' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer
const childRefs = useTemplateRefsList<TotoType['a']>();

// any
const test = childRefs.value[0]!;

问题

在 Vue 3 中，递归组件的正确类型是什么useTemplateRefsList？有没有办法动态引用当前组件的类型，或者有没有解决方法来实现这一点？

任何帮助或指导都将不胜感激！

javascript