diff --git a/packages/babel-plugin-jsx/README-zh_CN.md b/packages/babel-plugin-jsx/README-zh_CN.md
index 63f2eb7..56a0bba 100644
--- a/packages/babel-plugin-jsx/README-zh_CN.md
+++ b/packages/babel-plugin-jsx/README-zh_CN.md
@@ -14,7 +14,7 @@
npm install @vue/babel-plugin-jsx -D
```
-配置 Babel
+配置 Babel
```js
{
@@ -58,9 +58,14 @@ Default: `true`
合并 class / style / onXXX handlers
+#### enableObjectSlots
+
+使用 `enableObjectSlots` (文档下面会提到)。虽然在 JSX 中比较好使，但是会增加一些 `_isSlot` 的运行时条件判断，这会增加你的项目体积。即使你关闭了 `enableObjectSlots`，`v-slots` 还是可以使用
+
## 表达式
### 内容
+
函数式组件
```jsx
@@ -73,12 +78,12 @@ const App = () => ;
const App = {
render() {
return Vue 3.0
;
- }
+ },
};
```
```jsx
-import { withModifiers, defineComponent } from 'vue';
+import { withModifiers, defineComponent } from "vue";
const App = defineComponent({
setup() {
@@ -89,11 +94,9 @@ const App = defineComponent({
};
return () => (
-
- {count.value}
-
+ {count.value}
);
- }
+ },
});
```
@@ -117,13 +120,8 @@ const App = () => ;
动态绑定:
```jsx
-const placeholderText = 'email';
-const App = () => (
-
-);
+const placeholderText = "email";
+const App = () => ;
```
### 指令
@@ -150,11 +148,11 @@ v-model
```
```jsx
-
+
```
```jsx
-
+
```
会变编译成：
@@ -163,10 +161,10 @@ v-model
h(A, {
argument: val,
argumentModifiers: {
- modifier: true
+ modifier: true,
},
- 'onUpdate:argument': $event => val = $event
-})
+ "onUpdate:argument": ($event) => (val = $event),
+});
```
v-models
@@ -174,18 +172,23 @@ v-models
> 注意: 你应该传递一个二维数组给 v-models。
```jsx
-
-```
-
-```jsx
-
+
```
```jsx
+```
+
+```jsx
+
```
@@ -198,13 +201,13 @@ h(A, {
modelModifiers: {
modifier: true,
},
- 'onUpdate:modelValue': $event => foo = $event,
+ "onUpdate:modelValue": ($event) => (foo = $event),
bar: bar,
barModifiers: {
modifier: true,
},
- 'onUpdate:bar': $event => bar = $event,
-})
+ "onUpdate:bar": ($event) => (bar = $event),
+});
```
自定义指令
@@ -213,31 +216,27 @@ h(A, {
const App = {
directives: { custom: customDirective },
setup() {
- return () => (
-
- );
+ return () => ;
},
};
```
-### 插槽
+### 插槽
-> 注意: 在 `jsx` 中，应该使用 **`v-slots`** 代替 *`v-slot`*
+> 注意: 在 `jsx` 中，应该使用 **`v-slots`** 代替 _`v-slot`_
```jsx
const App = {
setup() {
const slots = {
- foo: () => B
+ foo: () => B,
};
return () => (
A
);
- }
+ },
};
// or
@@ -246,10 +245,10 @@ const App = {
setup() {
const slots = {
default: () => A
,
- foo: () => B
+ foo: () => B,
};
return () => ;
- }
+ },
};
// or
@@ -260,14 +259,14 @@ const App = {
{{
default: () => A
,
- foo: () => B
+ foo: () => B,
}}
- {() => 'foo'}
+ {() => "foo"}
);
- }
-}
+ },
+};
```
### 在 TypeSript 中使用
diff --git a/packages/babel-plugin-jsx/README.md b/packages/babel-plugin-jsx/README.md
index 0b3dd07..b746030 100644
--- a/packages/babel-plugin-jsx/README.md
+++ b/packages/babel-plugin-jsx/README.md
@@ -58,9 +58,18 @@ Default: `true`
merge static and dynamic class / style attributes / onXXX handlers
+#### enableObjectSlots
+
+Type: `boolean`
+
+Default: `true`
+
+Whether to enable `object slots` (mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of `_isSlot` condition expressions which increases your bundle size. And `v-slots` is still available even if `enableObjectSlots` is turned off.
+
## Syntax
### Content
+
functional component
```jsx
@@ -73,12 +82,12 @@ with render
const App = {
render() {
return Vue 3.0
;
- }
+ },
};
```
```jsx
-import { withModifiers, defineComponent } from 'vue';
+import { withModifiers, defineComponent } from "vue";
const App = defineComponent({
setup() {
@@ -89,12 +98,10 @@ const App = defineComponent({
};
return () => (
-
- {count.value}
-
+ {count.value}
);
- }
-})
+ },
+});
```
Fragment
@@ -117,13 +124,8 @@ const App = () => ;
with a dynamic binding:
```jsx
-const placeholderText = 'email';
-const App = () => (
-
-);
+const placeholderText = "email";
+const App = () => ;
```
### Directives
@@ -150,11 +152,11 @@ v-model
```
```jsx
-
+
```
```jsx
-
+
```
Will compile to:
@@ -163,10 +165,10 @@ Will compile to:
h(A, {
argument: val,
argumentModifiers: {
- modifier: true
+ modifier: true,
},
- 'onUpdate:argument': $event => val = $event
-})
+ "onUpdate:argument": ($event) => (val = $event),
+});
```
v-models
@@ -174,18 +176,23 @@ v-models
> Note: You should pass a Two-dimensional Arrays to v-models.
```jsx
-
-```
-
-```jsx
-
+
```
```jsx
+```
+
+```jsx
+
```
@@ -198,13 +205,13 @@ h(A, {
modelModifiers: {
modifier: true,
},
- 'onUpdate:modelValue': $event => foo = $event,
+ "onUpdate:modelValue": ($event) => (foo = $event),
bar: bar,
barModifiers: {
modifier: true,
},
- 'onUpdate:bar': $event => bar = $event,
-})
+ "onUpdate:bar": ($event) => (bar = $event),
+});
```
custom directive
@@ -213,31 +220,27 @@ custom directive
const App = {
directives: { custom: customDirective },
setup() {
- return () => (
-
- );
+ return () => ;
},
};
```
-### Slot
+### Slot
-> Note: In `jsx`, *`v-slot`* should be replace with **`v-slots`**
+> Note: In `jsx`, _`v-slot`_ should be replace with **`v-slots`**
```jsx
const App = {
setup() {
const slots = {
- foo: () => B
+ foo: () => B,
};
return () => (
A
);
- }
+ },
};
// or
@@ -246,13 +249,13 @@ const App = {
setup() {
const slots = {
default: () => A
,
- foo: () => B
+ foo: () => B,
};
return () => ;
- }
+ },
};
-// or
+// or you can use object slots when `enableObjectSlots` is not false.
const App = {
setup() {
return () => (
@@ -260,14 +263,14 @@ const App = {
{{
default: () => A
,
- foo: () => B
+ foo: () => B,
}}
- {() => 'foo'}
+ {() => "foo"}
);
- }
-}
+ },
+};
```
### In TypeScript