2020-07-02 13:30:17 +08:00
|
|
|
|
# Vue 3 Babel JSX 插件
|
|
|
|
|
|
2023-06-22 12:14:02 +08:00
|
|
|
|
[](https://www.npmjs.com/package/@vue/babel-plugin-jsx)
|
2021-09-30 10:18:35 +08:00
|
|
|
|
[](https://github.com/actions-cool/issues-helper)
|
2020-07-12 18:56:19 +08:00
|
|
|
|
|
2020-07-02 13:30:17 +08:00
|
|
|
|
以 JSX 的方式来编写 Vue 代码
|
|
|
|
|
|
2020-07-18 11:45:05 +08:00
|
|
|
|
[English](/packages/babel-plugin-jsx/README.md) | 简体中文
|
|
|
|
|
|
2020-07-02 13:30:17 +08:00
|
|
|
|
## 安装
|
|
|
|
|
|
|
|
|
|
安装插件
|
|
|
|
|
|
2020-07-18 11:45:05 +08:00
|
|
|
|
```bash
|
2020-08-28 09:42:13 +08:00
|
|
|
|
npm install @vue/babel-plugin-jsx -D
|
2020-07-02 13:30:17 +08:00
|
|
|
|
```
|
|
|
|
|
|
2021-01-09 21:18:32 +08:00
|
|
|
|
配置 Babel
|
2020-07-02 13:30:17 +08:00
|
|
|
|
|
2020-07-18 11:45:05 +08:00
|
|
|
|
```js
|
2020-07-02 13:30:17 +08:00
|
|
|
|
{
|
2020-08-28 09:42:13 +08:00
|
|
|
|
"plugins": ["@vue/babel-plugin-jsx"]
|
2020-07-02 13:30:17 +08:00
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 使用
|
|
|
|
|
|
|
|
|
|
### 参数
|
|
|
|
|
|
2020-07-29 12:37:37 +08:00
|
|
|
|
#### transformOn
|
|
|
|
|
|
|
|
|
|
Type: `boolean`
|
|
|
|
|
|
|
|
|
|
Default: `false`
|
2020-07-02 13:30:17 +08:00
|
|
|
|
|
|
|
|
|
把 `on: { click: xx }` 转成 `onClick: xxx`
|
|
|
|
|
|
2020-07-29 12:37:37 +08:00
|
|
|
|
#### optimize
|
|
|
|
|
|
|
|
|
|
Type: `boolean`
|
|
|
|
|
|
|
|
|
|
Default: `false`
|
|
|
|
|
|
|
|
|
|
是否开启优化. 如果你对 Vue 3 不太熟悉,不建议打开
|
|
|
|
|
|
|
|
|
|
#### isCustomElement
|
|
|
|
|
|
|
|
|
|
Type: `(tag: string) => boolean`
|
2020-07-02 13:30:17 +08:00
|
|
|
|
|
2020-07-29 12:37:37 +08:00
|
|
|
|
Default: `undefined`
|
2020-07-02 13:30:17 +08:00
|
|
|
|
|
2020-07-29 12:37:37 +08:00
|
|
|
|
自定义元素
|
2020-07-02 13:30:17 +08:00
|
|
|
|
|
2020-09-14 17:42:03 +08:00
|
|
|
|
#### mergeProps
|
|
|
|
|
|
|
|
|
|
Type: `boolean`
|
|
|
|
|
|
|
|
|
|
Default: `true`
|
|
|
|
|
|
|
|
|
|
合并 class / style / onXXX handlers
|
|
|
|
|
|
2021-01-09 21:18:32 +08:00
|
|
|
|
#### enableObjectSlots
|
|
|
|
|
|
|
|
|
|
使用 `enableObjectSlots` (文档下面会提到)。虽然在 JSX 中比较好使,但是会增加一些 `_isSlot` 的运行时条件判断,这会增加你的项目体积。即使你关闭了 `enableObjectSlots`,`v-slots` 还是可以使用
|
|
|
|
|
|
2021-02-28 18:08:42 +08:00
|
|
|
|
#### pragma
|
|
|
|
|
|
|
|
|
|
Type: `string`
|
|
|
|
|
|
|
|
|
|
Default: `createVNode`
|
|
|
|
|
|
2022-06-23 12:05:00 +08:00
|
|
|
|
替换编译 JSX 表达式的时候使用的函数
|
2021-02-28 18:08:42 +08:00
|
|
|
|
|
2020-07-03 00:51:53 +08:00
|
|
|
|
## 表达式
|
|
|
|
|
|
|
|
|
|
### 内容
|
2021-01-09 21:18:32 +08:00
|
|
|
|
|
2020-07-03 00:51:53 +08:00
|
|
|
|
函数式组件
|
|
|
|
|
|
|
|
|
|
```jsx
|
2020-07-18 11:45:05 +08:00
|
|
|
|
const App = () => <div></div>;
|
2020-07-03 00:51:53 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
在 render 中使用
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
const App = {
|
|
|
|
|
render() {
|
2020-07-18 11:45:05 +08:00
|
|
|
|
return <div>Vue 3.0</div>;
|
2021-01-09 21:18:32 +08:00
|
|
|
|
},
|
2020-07-18 11:45:05 +08:00
|
|
|
|
};
|
2020-07-03 00:51:53 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```jsx
|
2023-06-22 12:14:02 +08:00
|
|
|
|
import { withModifiers, defineComponent } from 'vue';
|
2020-07-03 00:51:53 +08:00
|
|
|
|
|
2020-09-01 10:14:36 +08:00
|
|
|
|
const App = defineComponent({
|
|
|
|
|
setup() {
|
|
|
|
|
const count = ref(0);
|
2020-07-22 09:53:16 +08:00
|
|
|
|
|
2020-09-01 10:14:36 +08:00
|
|
|
|
const inc = () => {
|
|
|
|
|
count.value++;
|
|
|
|
|
};
|
2020-07-22 09:53:16 +08:00
|
|
|
|
|
2020-09-01 10:14:36 +08:00
|
|
|
|
return () => (
|
2023-06-22 12:14:02 +08:00
|
|
|
|
<div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
|
2020-09-01 10:14:36 +08:00
|
|
|
|
);
|
2021-01-09 21:18:32 +08:00
|
|
|
|
},
|
2020-09-01 10:14:36 +08:00
|
|
|
|
});
|
2020-07-22 09:53:16 +08:00
|
|
|
|
```
|
|
|
|
|
|
2020-07-03 00:51:53 +08:00
|
|
|
|
Fragment
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
const App = () => (
|
|
|
|
|
<>
|
|
|
|
|
<span>I'm</span>
|
|
|
|
|
<span>Fragment</span>
|
|
|
|
|
</>
|
2020-07-18 11:45:05 +08:00
|
|
|
|
);
|
2020-07-03 00:51:53 +08:00
|
|
|
|
```
|
|
|
|
|
|
2020-07-18 11:45:05 +08:00
|
|
|
|
### Attributes / Props
|
2020-07-03 00:51:53 +08:00
|
|
|
|
|
|
|
|
|
```jsx
|
2020-07-18 11:45:05 +08:00
|
|
|
|
const App = () => <input type="email" />;
|
2020-07-03 00:51:53 +08:00
|
|
|
|
```
|
|
|
|
|
|
2020-11-29 19:09:10 +08:00
|
|
|
|
动态绑定:
|
2020-07-03 00:51:53 +08:00
|
|
|
|
|
|
|
|
|
```jsx
|
2023-06-22 12:14:02 +08:00
|
|
|
|
const placeholderText = 'email';
|
2021-01-09 21:18:32 +08:00
|
|
|
|
const App = () => <input type="email" placeholder={placeholderText} />;
|
2020-07-03 00:51:53 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 指令
|
|
|
|
|
|
2021-09-30 07:18:36 +08:00
|
|
|
|
#### v-show
|
2020-07-03 00:51:53 +08:00
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
const App = {
|
|
|
|
|
data() {
|
|
|
|
|
return { visible: true };
|
|
|
|
|
},
|
|
|
|
|
render() {
|
2020-07-22 09:23:23 +08:00
|
|
|
|
return <input v-show={this.visible} />;
|
2020-07-03 00:51:53 +08:00
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
2021-09-30 07:18:36 +08:00
|
|
|
|
#### v-model
|
2020-07-03 00:51:53 +08:00
|
|
|
|
|
2020-07-15 09:22:27 +08:00
|
|
|
|
> 注意:如果想要使用 `arg`, 第二个参数需要为字符串
|
2020-07-03 00:51:53 +08:00
|
|
|
|
|
|
|
|
|
```jsx
|
2020-07-22 09:23:23 +08:00
|
|
|
|
<input v-model={val} />
|
2020-07-03 00:51:53 +08:00
|
|
|
|
```
|
|
|
|
|
|
2021-09-30 07:18:36 +08:00
|
|
|
|
```jsx
|
|
|
|
|
<input v-model:argument={val} />
|
|
|
|
|
```
|
|
|
|
|
|
2020-07-13 23:44:52 +08:00
|
|
|
|
```jsx
|
2023-06-22 12:14:02 +08:00
|
|
|
|
<input v-model={[val, ['modifier']]} />
|
2020-07-13 23:44:52 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```jsx
|
2023-06-22 12:14:02 +08:00
|
|
|
|
<A v-model={[val, 'argument', ['modifier']]} />
|
2020-07-13 23:44:52 +08:00
|
|
|
|
```
|
|
|
|
|
|
2022-06-23 12:05:00 +08:00
|
|
|
|
会编译成:
|
2020-07-13 23:44:52 +08:00
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
h(A, {
|
2020-12-08 14:21:22 +08:00
|
|
|
|
argument: val,
|
|
|
|
|
argumentModifiers: {
|
2021-01-09 21:18:32 +08:00
|
|
|
|
modifier: true,
|
2020-07-13 23:44:52 +08:00
|
|
|
|
},
|
2023-06-22 12:14:02 +08:00
|
|
|
|
'onUpdate:argument': ($event) => (val = $event),
|
2021-01-09 21:18:32 +08:00
|
|
|
|
});
|
2020-12-08 14:21:22 +08:00
|
|
|
|
```
|
|
|
|
|
|
2021-09-30 07:18:36 +08:00
|
|
|
|
#### v-models (从 1.1.0 开始不推荐使用)
|
2020-12-08 14:21:22 +08:00
|
|
|
|
|
|
|
|
|
> 注意: 你应该传递一个二维数组给 v-models。
|
|
|
|
|
|
|
|
|
|
```jsx
|
2023-06-22 12:14:02 +08:00
|
|
|
|
<A v-models={[[foo], [bar, 'bar']]} />
|
2020-12-08 14:21:22 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```jsx
|
2021-01-09 21:18:32 +08:00
|
|
|
|
<A
|
|
|
|
|
v-models={[
|
2023-06-22 12:14:02 +08:00
|
|
|
|
[foo, 'foo'],
|
|
|
|
|
[bar, 'bar'],
|
2021-01-09 21:18:32 +08:00
|
|
|
|
]}
|
|
|
|
|
/>
|
2020-12-08 14:21:22 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
<A
|
|
|
|
|
v-models={[
|
2023-06-22 12:14:02 +08:00
|
|
|
|
[foo, ['modifier']],
|
|
|
|
|
[bar, 'bar', ['modifier']],
|
2020-12-08 14:21:22 +08:00
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
```
|
|
|
|
|
|
2022-06-23 12:05:00 +08:00
|
|
|
|
会编译成:
|
2020-12-08 14:21:22 +08:00
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
h(A, {
|
|
|
|
|
modelValue: foo,
|
|
|
|
|
modelModifiers: {
|
|
|
|
|
modifier: true,
|
|
|
|
|
},
|
2023-06-22 12:14:02 +08:00
|
|
|
|
'onUpdate:modelValue': ($event) => (foo = $event),
|
2020-12-08 14:21:22 +08:00
|
|
|
|
bar: bar,
|
|
|
|
|
barModifiers: {
|
|
|
|
|
modifier: true,
|
|
|
|
|
},
|
2023-06-22 12:14:02 +08:00
|
|
|
|
'onUpdate:bar': ($event) => (bar = $event),
|
2021-01-09 21:18:32 +08:00
|
|
|
|
});
|
2020-07-13 23:44:52 +08:00
|
|
|
|
```
|
|
|
|
|
|
2022-06-23 12:05:00 +08:00
|
|
|
|
#### 自定义指令
|
2020-07-03 00:51:53 +08:00
|
|
|
|
|
2021-09-30 07:18:36 +08:00
|
|
|
|
只有 argument 的时候推荐使用
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
const App = {
|
|
|
|
|
directives: { custom: customDirective },
|
|
|
|
|
setup() {
|
|
|
|
|
return () => <a v-custom:arg={val} />;
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
```
|
|
|
|
|
|
2020-07-03 00:51:53 +08:00
|
|
|
|
```jsx
|
|
|
|
|
const App = {
|
|
|
|
|
directives: { custom: customDirective },
|
|
|
|
|
setup() {
|
2023-06-22 12:14:02 +08:00
|
|
|
|
return () => <a v-custom={[val, 'arg', ['a', 'b']]} />;
|
2020-07-03 00:51:53 +08:00
|
|
|
|
},
|
2020-07-18 11:45:05 +08:00
|
|
|
|
};
|
2020-07-03 00:51:53 +08:00
|
|
|
|
```
|
|
|
|
|
|
2021-01-09 21:18:32 +08:00
|
|
|
|
### 插槽
|
2020-07-03 00:51:53 +08:00
|
|
|
|
|
2021-01-09 21:18:32 +08:00
|
|
|
|
> 注意: 在 `jsx` 中,应该使用 **`v-slots`** 代替 _`v-slot`_
|
2020-09-24 17:19:00 +08:00
|
|
|
|
|
2020-07-11 23:14:18 +08:00
|
|
|
|
```jsx
|
2021-04-12 13:15:44 +08:00
|
|
|
|
const A = (props, { slots }) => (
|
|
|
|
|
<>
|
2023-06-22 12:14:02 +08:00
|
|
|
|
<h1>{slots.default ? slots.default() : 'foo'}</h1>
|
|
|
|
|
<h2>{slots.bar?.()}</h2>
|
2021-04-12 13:15:44 +08:00
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
|
2020-09-24 17:19:00 +08:00
|
|
|
|
const App = {
|
|
|
|
|
setup() {
|
|
|
|
|
const slots = {
|
2021-04-12 13:15:44 +08:00
|
|
|
|
bar: () => <span>B</span>,
|
2020-09-24 17:19:00 +08:00
|
|
|
|
};
|
|
|
|
|
return () => (
|
|
|
|
|
<A v-slots={slots}>
|
|
|
|
|
<div>A</div>
|
|
|
|
|
</A>
|
|
|
|
|
);
|
2021-01-09 21:18:32 +08:00
|
|
|
|
},
|
2020-09-24 17:19:00 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// or
|
|
|
|
|
|
2020-07-11 23:14:18 +08:00
|
|
|
|
const App = {
|
|
|
|
|
setup() {
|
|
|
|
|
const slots = {
|
2020-07-22 09:53:16 +08:00
|
|
|
|
default: () => <div>A</div>,
|
2021-04-12 13:15:44 +08:00
|
|
|
|
bar: () => <span>B</span>,
|
2020-07-18 11:45:05 +08:00
|
|
|
|
};
|
2020-07-22 09:23:23 +08:00
|
|
|
|
return () => <A v-slots={slots} />;
|
2021-01-09 21:18:32 +08:00
|
|
|
|
},
|
2020-07-18 11:45:05 +08:00
|
|
|
|
};
|
2020-12-07 23:17:45 +08:00
|
|
|
|
|
2021-12-21 11:11:37 +08:00
|
|
|
|
// 或者,当 `enableObjectSlots` 不是 `false` 时,您可以使用对象插槽
|
2020-12-07 23:17:45 +08:00
|
|
|
|
const App = {
|
|
|
|
|
setup() {
|
|
|
|
|
return () => (
|
|
|
|
|
<>
|
|
|
|
|
<A>
|
2020-12-13 11:48:41 +08:00
|
|
|
|
{{
|
2020-12-07 23:17:45 +08:00
|
|
|
|
default: () => <div>A</div>,
|
2021-04-12 13:15:44 +08:00
|
|
|
|
bar: () => <span>B</span>,
|
2020-12-13 11:48:41 +08:00
|
|
|
|
}}
|
2020-12-07 23:17:45 +08:00
|
|
|
|
</A>
|
2023-06-22 12:14:02 +08:00
|
|
|
|
<B>{() => 'foo'}</B>
|
2020-12-07 23:17:45 +08:00
|
|
|
|
</>
|
|
|
|
|
);
|
2021-01-09 21:18:32 +08:00
|
|
|
|
},
|
|
|
|
|
};
|
2020-07-11 23:14:18 +08:00
|
|
|
|
```
|
2020-07-03 00:51:53 +08:00
|
|
|
|
|
2021-09-30 07:18:36 +08:00
|
|
|
|
### 在 TypeScript 中使用
|
2020-09-01 10:14:36 +08:00
|
|
|
|
|
|
|
|
|
`tsconfig.json`:
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
{
|
|
|
|
|
"compilerOptions": {
|
|
|
|
|
"jsx": "preserve"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2022-06-23 12:05:00 +08:00
|
|
|
|
## 谁在使用
|
2020-07-09 21:16:10 +08:00
|
|
|
|
|
|
|
|
|
<table>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td align="center">
|
|
|
|
|
<a target="_blank" href="https://www.antdv.com/">
|
|
|
|
|
<img
|
|
|
|
|
width="32"
|
2023-12-11 01:36:30 +08:00
|
|
|
|
src="https://github.com/vuejs/babel-plugin-jsx/assets/6481596/8d604d42-fe5f-4450-af87-97999537cd21"
|
2020-07-09 21:16:10 +08:00
|
|
|
|
/>
|
|
|
|
|
<br>
|
|
|
|
|
<strong>Ant Design Vue</strong>
|
|
|
|
|
</a>
|
|
|
|
|
</td>
|
|
|
|
|
<td align="center">
|
2020-07-09 21:36:13 +08:00
|
|
|
|
<a target="_blank" href="https://youzan.github.io/vant/#/zh-CN/">
|
2020-07-09 21:16:10 +08:00
|
|
|
|
<img
|
|
|
|
|
width="32"
|
|
|
|
|
style="vertical-align: -0.32em; margin-right: 8px;"
|
|
|
|
|
src="https://img.yzcdn.cn/vant/logo.png"
|
|
|
|
|
/>
|
|
|
|
|
<br>
|
|
|
|
|
<strong>Vant</strong>
|
|
|
|
|
</a>
|
|
|
|
|
</td>
|
2020-09-20 13:14:57 +08:00
|
|
|
|
<td align="center">
|
|
|
|
|
<a target="_blank" href="https://github.com/element-plus/element-plus">
|
|
|
|
|
<img
|
|
|
|
|
height="32"
|
|
|
|
|
style="vertical-align: -0.32em; margin-right: 8px;"
|
|
|
|
|
src="https://user-images.githubusercontent.com/10731096/91267529-259f3680-e7a6-11ea-9a60-3286f750de01.png"
|
|
|
|
|
/>
|
|
|
|
|
<br>
|
|
|
|
|
<strong>Element Plus</strong>
|
|
|
|
|
</a>
|
|
|
|
|
</td>
|
2021-04-10 22:04:21 +08:00
|
|
|
|
<td align="center">
|
|
|
|
|
<a target="_blank" href="https://github.com/leezng/vue-json-pretty">
|
|
|
|
|
<img
|
|
|
|
|
height="32"
|
|
|
|
|
style="vertical-align: -0.32em; margin-right: 8px;"
|
|
|
|
|
src="https://raw.githubusercontent.com/leezng/vue-json-pretty/master/static/logo.svg"
|
|
|
|
|
/>
|
|
|
|
|
<br>
|
|
|
|
|
<strong>Vue Json Pretty</strong>
|
|
|
|
|
</a>
|
|
|
|
|
</td>
|
2020-07-09 21:16:10 +08:00
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
|
2020-07-02 13:30:17 +08:00
|
|
|
|
## 兼容性
|
|
|
|
|
|
|
|
|
|
要求:
|
|
|
|
|
|
|
|
|
|
- **Babel 7+**
|
|
|
|
|
- **Vue 3+**
|