原生 <component :is> 太灵活:is 既可以是字符串也可以是组件对象,组件名拼错(AsewomeButton)编译器不会发现,props 也没有类型检查,一个 div 可能收到 text 和 @click。作者团队先试 ESLint 禁字符串 is,解决不了 props 问题,于是封装了 DynamicComponent:用联合类型约束可传的 props(只允许候选组件共有的键),允许 div 这类原生标签,但禁止把组件名当字符串传,内部用渲染函数实现,用法几乎不变。
🔑 核心要点
难点不在灵活,而在于 linter、编译器、TS 检查都认为这些写法「技术上正确」。
props 类型取联合类型的交集:只有两个候选组件都有的属性才允许传。
配一条 lint 规则引导所有人改用封装组件,避免旧写法回流。
💡 金句
“These problems can be difficult to track as the linter, compiler or TS check could miss them as technically they are correct.” 译:这些问题很难被发现,因为 linter、编译器和 TS 检查都会漏掉它们——技术上它们是对的。