vue3 vite 项目tsx写法尝试

vite配置

上面jsx插件搞好就能在vue项目中使用jsx写法了

代码尝试

ChildWorld.vue

<script lang="tsx">


import { defineComponent, defineProps } from "vue"


const childAbc = () => {
  return (<div>childAbc</div>)
}

const childCbd = (props, ctx) => {
  console.log(props, ctx, "childCbd")
  const { emit } = ctx;

  setTimeout(() => {
    //emit事件给父组件
    emit('listen', 8888)
  }, 2000);
  return (
    <>
      <div>childCbd</div>
      <div>mytime</div>
      <div>{props.msg}</div>
    </>
  )
}


export default defineComponent({
  name: "ChildWorld",

  setup(props, ctx) {

    const todo = (val) => {
      console.log(val, "todo")
    }

    return () => (<div>Hello World


      <childAbc />
      事件加onSomeThing,这里的on代表监听子组件事件，子组件需要去掉on来emit事件
      <childCbd msg="abc" onListen={todo} />

      < /div>);
  }
})

</script>