dropDown 获取不到来自 TooltipProps 里面的props

来源：9-2 Dropdown 编码第一部分

慕粉3044899

2024-11-14

老师你好
使用这种方法继承TooltipProps 在app.vue里面穿的值在dropDown.vue里面获取不到图片描述
我换了一种方式写进去就可以了想知道是为什么

写回答

1回答

张轩

2024-11-14

已采纳

当使用 interface extends 时，TypeScript 的类型系统确实会正确继承属性，但 Vue 的编译器无法正确解析这种继承关系。Vue 的编译器只会看到直接定义在接口中的属性。
当我们想要扩展现有的 Props 类型时，应该使用类型交叉而不是接口继承。

// 基础属性
interface BaseEditorProps {
    modelValue?: string;
    disabled?: boolean;
}

// 扩展属性（正确方式）
type EditorProps = {
    content?: string;
    theme?: 'snow' | 'bubble';
    contentType?: 'html' | 'text' | 'delta';
    sectionType?: string;
    isDirty?: boolean;
    contextData?: Record<string, any>;
} & BaseEditorProps