Vue JSX props slots 类型定义问题？

作者站长头像
站长
· 阅读数 12

请教各位 defineComponent((props, {emit, slots}) => { return () => <div></div> })这种 JSX 语法写法的时候，大家是怎么声明 props emits slots 的类型的？我遇到了以下问题：

  1. 模板里可以通过 defineSlots 得到类型提示，JSX 应该怎么做比较好？
  2. props 定义运行时类型检测的时候，组件上写 class='' 的话 ts 会报错。报错图如下：

Vue JSX props slots 类型定义问题？

Vue JSX props slots 类型定义问题？

回复
1个回答
avatar
test
2024-06-30
import { defineComponent, SetupContext } from 'vue'

interface Props {
  text?: string;
}

const MyComponent = defineComponent({
  name: 'MyComponent',
  props: {
    text: String,
  },
  setup(props: Props, { emit, slots }: SetupContext) {
    return () => (
      <div>
        {props.text}
        {slots.default && slots.default()}
      </div>
    )
  },
})

export default MyComponent
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容