我试着用一个子组件来分隔一些东西的显示（数据库查询的异步结果）。我试着从Vue提供/注入系统来在组件之间传递变量。它工作正常，但子组件似乎仍然抱怨。
这是代码的一个子集，目的是提供一个概念。
在我的父组件中：
<template>
<InteractionResults /> <!-- the child -->
</template>
<script setup lang="ts">
import { ref, provide } from 'vue';
const loading = ref<boolean>(false);
const error = ref<boolean>(false);
let interactions = ref<Interaction[]>([]);
provide('search', { error, loading, interactions })
</script>在我的子组件（InteractionResults）中：
<template>
<h6>interactionResults</h6>
{{loading}}
<template>
<script setup lang="ts">
import { inject } from 'vue';
import type { Interaction } from '@/models/Interaction';
const { error, loading, interactions } = inject('search');
// It complains and the 3 variables are highlighted in red.
</script>代码正常工作，但VS Code报告如下（例如interactions，但其他两个变量使用各自的名称给出相同的错误）：
类型"{error：}"上不存在属性"interactions"任何;加载：任何;相互作用：任何;}|未定义'. ts（2339）
1条答案
按热度按时间tct7dpnv1#
根据文件：
当使用字符串注入键时，注入值的类型将是
unknown，并且需要通过泛型类型参数显式声明：注意，注入值仍然可以是
undefined，因为不能保证提供程序在运行时提供此值。在您的特定情况下，这意味着您必须将类型显式指定为
inject的类型参数，并提供一个默认值，该值将在提供程序在运行时不提供值的情况下使用：如果没有默认值，TS将反对，因为
undefined不能被反结构化。如果您需要在多个地方执行上述操作，那么将接口声明和默认值放在一个单独的文件中并从那里导入它们可能是有意义的，这样可以使您的代码保持干燥。