在vue3+vite中怎么使用tsx

一. 安装与配置

首先安装插件

npm i @vitejs/plugin-vue-jsx -D

配置vite.config.ts

import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
  plugins: [vue(), vueJsx()]
})

二. 使用tsx

import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    // Todo
    return () => <div>
        <div>Child1</div>
        <div>Child2</div>
        <div>Child3</div>
    </div>
  }
})

v-if

// TSX
return () => (
  <div>
    {
      state ?  <span>A</span> : <span>B</span>
    }
  </div>
)

v-bind

import style from '***'
return () => (
  <div class={style.divClass} style={{fontSize:'16px'}} ></div>
)

v-for

return () => (
  <div>
    {
      list.map((item, index) => <div>{item}</div>
    }
  </div>
)

插槽

// child
return () => (
  <div>默认插槽: {slots.default && slots.default()}</div>
)


// parent
return () => (
  <Child v-slots={{
      default: () => '默认的内容是'
    }}>
  </Child>
)

三. tsx语法规则

1. TSX文件需要使用.tsx后缀，而不是.js或.jsx。

2. TSX文件中可以包含HTML标签，例如<div>、<h1>等。

3. TSX文件中可以包含JavaScript表达式，用{}括起来，例如{variable}、{1+2}等。

4. 在TSX中，需要使用大括号{}将JavaScript代码包裹起来，并将其作为一个React元素的属性或子元素。

5. 如果要在TSX中使用自定义组件，则需要将其作为一个标签来使用，例如<MyComponent />。

6. 如果组件不需要子元素，则可以将其写成自闭合标签，例如<MyComponent />

7. 如果组件需要接受属性，则可以在标签上添加属性，例如<MyComponent color="red" />。

8. 在TSX中，所有的属性都需要使用驼峰命名法，例如className而不是class。

9. 如果要在TSX中使用CSS样式，则需要使用对象字面量的形式，例如style={{color: "red", fontSize: "12px"}}。

10. 在TSX中，需要使用接口或类型别名来声明组件属性的类型，例如interface Props {name: string;}。

        需要注意的是，TSX文件需要先经过编译器的编译才能在浏览器中运行。因此，在使用TSX语法时，需要使用TypeScript的编译工具来编译TSX文件，将其转换为可在浏览器中运行的JavaScript文件。