安装
npm install @vitejs/plugin-vue-jsx -D
vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
plugins: [vue(), vueJsx()],
});
tsconfig.json
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
使用
文件后缀需要修改为.tsx
<input v-model={v.value} type="text" /> // v-model 不会自动解包ref.value
<div v-show={flag.value}>foo</div> // v-show
flag.value ? <div>foo</div> : <div>bar</div> // 三元表达式
{
arr.map(v=>{
return <div>${v}</div>
})
}
<div data-arr={arr}>1</div> // v-bind
type Props = {
title:string
}
const renderDom = (props:Props,content:any) => {
return (
<>
<div>{props.title}</div> // props
<button onClick={clickTap}>点击</button> // event
<button onClick={clickTap.bind(this,content)}>点击</button> // emit
</>
)
}
const clickTap = (ctx:any) => {
ctx.emit('on-click',1)
}