如何在VUE中使用JSX？

是的，Vue 支持 JSX，但需要额外配置，1. 对于 Vite 项目，安装 @vitejs/plugin-vue-jsx 并在 vite.config.js 中添加 vueJsx() 插件；2. 对于 Vue CLI 项目，安装 @vue/babel-preset-jsx 并在 babel.config.js 中添加预设；3. 使用 defineComponent 和 setup 函数返回 JSX 内容，注意使用 class 和 onClick 等 Vue 约定；4. 在 .vue 文件中可通过 h 函数或组件 is 绑定调用 JSX 渲染函数；5. 使用 TypeScript 时，文件命名为 .tsx，配置 tsconfig.json 的 jsx 为 preserve 且 jsxImportSource 为 vue；需注意模板语法如 v-if、v-for 不适用于 JSX，应使用 JavaScript 表达式替代，且 JSX 在 Vue 中非主流，适用于复杂渲染逻辑场景，完整支持需结合构建工具配置。

Vue doesn't support JSX out of the box, but you can use JSX in Vue — especially if you're working with Vue 3 and using the Vite or Vue CLI build setup. Here's how to enable and use JSX in your Vue project.

✅ Why Use JSX in Vue?

While Vue traditionally uses templates, JSX gives you more programmatic control over rendering — useful for complex component logic, dynamic children, or if you're coming from a React background.

1. Enable JSX Support

For Vite Projects

Install the JSX plugin for Vue:

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

Then, update your vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ]
})

Now you can use .jsx or .tsx files, or even write JSX inside .vue files in the setup function.

For Vue CLI Projects

If you're using Vue CLI, install the Babel plugin:

npm install @vue/babel-preset-jsx -D

Then in your babel.config.js:

module.exports = {
  presets: ['@vue/babel-preset-jsx']
}

2. Write JSX in Components

You can now write components using JSX. Here's an example of a .jsx file:

// MyButton.jsx
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    label: String,
    onClick: Function
  },
  setup(props) {
    return () => (
      <button onClick={props.onClick} class="my-button">
        {props.label}
      </button>
    )
  }
})

Note: Use class instead of className, and onClick instead of onclick — it follows Vue's DOM conventions.

3. Using JSX in .vue Files (Optional)

You can mix JSX in the <script setup> section:

<script setup>
import { h } from 'vue'

const renderDynamic = () => {
  return h('div', { class: 'dynamic' }, [
    h('span', 'Hello JSX inside Vue!')
  ])
}
</script>

<template>
  <div>
    <!-- You can't use JSX in <template> -->
    <!-- But you can call render functions -->
    <component :is="renderDynamic" />
  </div>
</template>

Alternatively, use JSX only in setup() return if you're not using <template>.

4. JSX with TypeScript (.tsx)

If you're using TypeScript, name your file .tsx and define props with interfaces:

import { defineComponent } from 'vue'

interface Props {
  name: string
  count?: number
}

export default defineComponent({
  props: {
    name: { type: String, required: true },
    count: { type: Number, default: 0 }
  },
  setup(props: Props) {
    return () => (
      <div>
        <h1>Hello, {props.name}!</h1>
        <p>Count: {props.count}</p>
      </div>
    )
  }
})

Make sure your tsconfig.json allows JSX:

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue"
  }
}

⚠️ Things to Keep in Mind

• Templates are still the standard in Vue — JSX is optional and less common.

• No template features in JSX: directives like v-if, v-for don't work. Use JavaScript expressions instead:

  // Instead of v-if
  {show && <p>Shown</p>}
  
  // Instead of v-for
  {items.map(item => <div key={item.id}>{item.label}</div>)}

• Event handlers: Use onClick, onInput, etc. (camelCase), and pass functions directly.

• Use onUpdate:xxx for v-model-like behavior.

---

Summary

You can use JSX in Vue with the right setup:

• ✅ Install @vitejs/plugin-vue-jsx (for Vite) or Babel preset (for Vue CLI)
• ✅ Use defineComponent and setup to return a render function
• ✅ Write JSX with Vue's event and binding conventions
• ✅ Works with TypeScript via .tsx

It's not as common as in React, but it's powerful for dynamic or reusable render logic.

Basically, Vue supports JSX — just not in templates. Use it where it adds value.

以上是如何在VUE中使用JSX？的详细内容。更多信息请关注PHP中文网其他相关文章！