vue3初体验-tsx

安装

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)
}