因为有点受不了 React 的细分组件优化,想试试 Vue 的 jsx ,结果要自己定义 props + defineComponent 写法好麻烦,所以自己花了 2 个星期的时间去把 @vitejs/plugin-vue-jsx 魔改了下,使语法更接近 React 了👈🤣
举个🌰
import { effect, ref, type VNode } from 'vue'
type Props = {
name: string
header: (count: number) => VNode
children?: VNode
}
type Handler = {
addCount: () => void
}
function ChildComp(props: Props) {
const innerCount = ref(0)
defineExpose<Handler>({
addCount() {
innerCount.value++
},
})
if(!props.children) return <div>no children</div>
return (
<>
<div>{props.header(innerCount.value)}</div>
<div onClick={() => innerCount.value++}>
{props.name} count: {innerCount.value}
</div>
{props.children}
</>
)
}
项目目前就 preview 版本,还不算稳定
1
shintendo 2 小时 14 分钟前
className 也有好好还原吗
|