因为有点受不了 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 版本,还不算稳定
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.