# @cabloy/vue-babel-plugin-jsx 中文文档

规范地址：https://npmcn.com/package/%40cabloy/vue-babel-plugin-jsx/

版本：2\.0\.1
npm 元数据更新时间：2026-03-22T12:12:22.101Z
中文译文更新时间：2026-11-08T23:10:14.675Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cabloy/vue-babel-plugin-jsx
原文对照：https://npmcn.com/package/%40cabloy/vue-babel-plugin-jsx/?lang=original
项目主页：https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme
源码仓库：https://github.com/vuejs/babel-plugin-jsx

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：41.3 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：@babel/core ^7\.0\.0-0
- 首次发布：2025-01-15T12:45:00.703Z
- 最新版本发布：2026-03-22T12:12:21.956Z
- 近 30 天下载量：5780（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 1 个）

## 中文简介

Vue 3 JSX 的 Babel 插件

## 安装

```sh
npm install @cabloy/vue-babel-plugin-jsx
```

也可以使用：`pnpm add @cabloy/vue-babel-plugin-jsx`、`yarn add @cabloy/vue-babel-plugin-jsx`、`bun add @cabloy/vue-babel-plugin-jsx`

## README

# Vue 3 的 Babel 插件 JSX

[![npm package](https://img.shields.io/npm/v/@vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@vue/babel-plugin-jsx) [![issues-helper](https://img.shields.io/badge/Issues%20Manage%20By-issues--helper-blueviolet?style=flat-square)](https://github.com/actions-cool/issues-helper)

加入Vue JSX支持.

页:1 [简体中文](https://npmcn.com/packages/babel-plugin-jsx/README-zh_CN.md)

## 安装

安装插件 :

```bash
npm install @vue/babel-plugin-jsx -D
```

然后将插件添加到您的 bail 配置 :

```json
{
  "plugins": ["@vue/babel-plugin-jsx"]
}
```

## 使用量

### 选项

#### 打开

类型 : `boolean`

默认 : `false`

转换 `on: { click: xx }` 改为 `onClick: xxx`

#### 优化

类型 : `boolean`

默认 : `false`

启用时, 此插件将使用优化运行时代码 [`PatchFlags`](https://vuejs.org/guide/extras/rendering-mechanism#patch-flags) 财务报告和审定财务报表 [`SlotFlags`](https://github.com/vuejs/core/blob/v3.5.13/packages/runtime-core/src/componentSlots.ts#L69-L77) 提高渲染性能。 然而,由于JSX的动态性质,优化不如Vue官方模板编译器中那样全面.

由于优化后的代码可能跳过某些重置以提高性能,因此我们强烈建议在允许此选项确保一切如所期望的那样工作后,彻底测试您的应用.

#### 海关元素

类型 : `(tag: string) => boolean`

默认 : `undefined`

配置自定义元素

#### 合并选项

类型 : `boolean`

默认 : `true`

合并静态和动态类/ 样式属性 / 在 XXX 处理器上

#### 启用对象槽

类型 : `boolean`

默认 : `true`

是否启用 `object slots` (以下文中提及)语法". 在JSX中也许有用,但会增加很多 `_isSlot` 增加捆绑大小的条件表达式。 还有 `v-slots` 即使 `enableObjectSlots` 关闭.

#### 贴纸

类型 : `string`

默认 : `createVNode`

替换汇编 JSX 表达式时使用的函数 .

#### 分辨率类型

类型 : `boolean`

默认 : `false`

(单位:千美元)**实验**从类型推断组件元数据(例如:. `props`, (中文(简体) ), `emits`, (中文(简体) ), `name`) (中文(简体) ). 这是一个实验性特征,可能并非在所有情况下都可行.

## 语法

### 内容

职能构成部分

```jsx
const App = () => <div>Vue 3.0</div>
```

已生效

```jsx
const App = {
  render() {
    return <div>Vue 3.0</div>
  },
}
```

```jsx
import { defineComponent, withModifiers } from 'vue'

const App = defineComponent({
  setup() {
    const count = ref(0)

    const inc = () => {
      count.value++
    }

    return () => <div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
  },
})
```

断裂

```jsx
const App = () => (
  <>
    <span>I'm</span>
    <span>Fragment</span>
  </>
)
```

### 属性/ 道具

```jsx
const App = () => <input type="email" />
```

带有动态绑定的:

```jsx
const placeholderText = 'email'
const App = () => <input type="email" placeholder={placeholderText} />
```

### 指令

#### v 显示

```jsx
const App = {
  data() {
    return { visible: true }
  },
  render() {
    return <input v-show={this.visible} />
  },
}
```

#### v 型号

> 注意: 您应该通过第二个参数作为字符串来使用 `arg`。 。 。 .

```jsx
<input v-model={val} />
```

```jsx
<input v-model:argument={val} />
```

```jsx
;<input v-model={[val, ['modifier']]} />
// Or
;<input v-model_modifier={val} />
```

```jsx
;<A v-model={[val, 'argument', ['modifier']]} />
// Or
;<input v-model:argument_modifier={val} />
```

将汇编到:

```js
h(A, {
  argument: val,
  argumentModifiers: {
    modifier: true,
  },
  'onUpdate:argument': ($event) => (val = $event),
})
```

#### v-型(自v1.1.0起不推荐)

> 注意:您应该通过一个二维矩阵给v-models.

```jsx
<A v-models={[[foo], [bar, 'bar']]} />
```

```jsx
<A
  v-models={[
    [foo, 'foo'],
    [bar, 'bar'],
  ]}
/>
```

```jsx
<A
  v-models={[
    [foo, ['modifier']],
    [bar, 'bar', ['modifier']],
  ]}
/>
```

将汇编到:

```js
h(A, {
  modelValue: foo,
  modelModifiers: {
    modifier: true,
  },
  'onUpdate:modelValue': ($event) => (foo = $event),
  bar,
  barModifiers: {
    modifier: true,
  },
  'onUpdate:bar': ($event) => (bar = $event),
})
```

#### 自定义指令

使用字符串参数时推荐

```jsx
const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom:arg={val} />
  },
}
```

```jsx
const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom={[val, 'arg', ['a', 'b']]} />
  },
}
```

### 槽

> 说明: `jsx`, (中文(简体) ), _`v-slot`_ 应替换为 **`v-slots`**

```jsx
const A = (props, { slots }) => (
  <>
    <h1>{slots.default ? slots.default() : 'foo'}</h1>
    <h2>{slots.bar?.()}</h2>
  </>
)

const App = {
  setup() {
    const slots = {
      bar: () => <span>B</span>,
    }
    return () => (
      <A v-slots={slots}>
        <div>A</div>
      </A>
    )
  },
}

// or

const App2 = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    }
    return () => <A v-slots={slots} />
  },
}

// or you can use object slots when `enableObjectSlots` is not false.
const App3 = {
  setup() {
    return () => (
      <>
        <A>
          {{
            default: () => <div>A</div>,
            bar: () => <span>B</span>,
          }}
        </A>
        <B>{() => 'foo'}</B>
      </>
    )
  },
}
```

### 在类型脚本中

`tsconfig.json`数字 :

```json
{
  "compilerOptions": {
    "jsx": "preserve"
  }
}
```

## 谁在用

<table><tbody><tr><td align="center"><a href="https://www.antdv.com/" rel="nofollow noopener noreferrer"><img src="https://github.com/vuejs/babel-plugin-jsx/assets/6481596/8d604d42-fe5f-4450-af87-97999537cd21" width="32" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><strong>蚂蚁设计Vue</strong></a></td><td align="center"><a href="https://youzan.github.io/vant/#/zh-CN/" rel="nofollow noopener noreferrer"><img src="https://img.yzcdn.cn/vant/logo.png" width="32" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><strong>范特语</strong></a></td><td align="center"><a href="https://github.com/element-plus/element-plus" rel="nofollow noopener noreferrer"><img height="32" src="https://user-images.githubusercontent.com/10731096/91267529-259f3680-e7a6-11ea-9a60-3286f750de01.png" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><strong>元素加号</strong></a></td><td align="center"><a href="https://github.com/leezng/vue-json-pretty" rel="nofollow noopener noreferrer"><img height="32" src="https://raw.githubusercontent.com/leezng/vue-json-pretty/master/static/logo.svg" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><strong>韦杰森漂亮</strong></a></td></tr></tbody></table>

## 兼容性

此 repo 仅兼容 :

-   **贝贝 7+**
-   **第3号+**

## 常见问题

### @cabloy/vue-babel-plugin-jsx 是什么？

Vue 3 JSX 的 Babel 插件

### 如何安装 @cabloy/vue-babel-plugin-jsx？

在项目目录运行 npm install @cabloy/vue-babel-plugin-jsx，或使用 pnpm add / yarn add / bun add。

### @cabloy/vue-babel-plugin-jsx 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cabloy/vue-babel-plugin-jsx 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cabloy/vue-babel-plugin-jsx 可以商用吗？

@cabloy/vue-babel-plugin-jsx 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cabloy/vue-babel-plugin-jsx 的下载量有多少？

根据 npm 官方下载统计，@cabloy/vue-babel-plugin-jsx 在 2026/10/09 – 2026/11/07 这 30 天内被下载 5,780 次，日均约 193 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cabloy/vue-babel-plugin-jsx 还在维护吗？

最新版本 2\.0\.1 发布于 2026/03/22（7 个月前）；至今共发布 2 个版本，其中过去 12 个月发布了 1 个；首次发布于 2025/01/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。