images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2025-11-01 01:42:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: enableObjectSlots

Browse Source
This commit is contained in:
Amour1688
2021-01-09 21:18:32 +08:00
parent 689ceea4c0
commit 76add10663
2 changed files with 91 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
packages/babel-plugin-jsx/README-zh_CN.md
View File

@@ -58,9 +58,14 @@ Default: `true`
合并 class / style / onXXX handlers 合并 class / style / onXXX handlers
#### enableObjectSlots
使用 `enableObjectSlots` (文档下面会提到)。虽然在 JSX 中比较好使，但是会增加一些 `_isSlot` 的运行时条件判断，这会增加你的项目体积。即使你关闭了 `enableObjectSlots`，`v-slots` 还是可以使用
## 表达式 ## 表达式
### 内容 ### 内容
函数式组件 函数式组件
```jsx ```jsx
@@ -73,12 +78,12 @@ const App = () => <div></div>;
const App = { const App = {
render() { render() {
return <div>Vue 3.0</div>; return <div>Vue 3.0</div>;
} },
}; };
``` ```
```jsx ```jsx
import { withModifiers, defineComponent } from 'vue'; import { withModifiers, defineComponent } from "vue";
const App = defineComponent({ const App = defineComponent({
setup() { setup() {
@@ -89,11 +94,9 @@ const App = defineComponent({
}; };
return () => ( return () => (
<div onClick={withModifiers(inc, ['self'])}> <div onClick={withModifiers(inc, ["self"])}>{count.value}</div>
{count.value}
</div>
); );
} },
}); });
``` ```
@@ -117,13 +120,8 @@ const App = () => <input type="email" />;
动态绑定: 动态绑定:
```jsx ```jsx
const placeholderText = 'email'; const placeholderText = "email";
const App = () => ( const App = () => <input type="email" placeholder={placeholderText} />;
<input
type="email"
placeholder={placeholderText}
/>
);
``` ```
### 指令 ### 指令
@@ -150,11 +148,11 @@ v-model
``` ```
```jsx ```jsx
<input v-model={[val, ['modifier']]} /> <input v-model={[val, ["modifier"]]} />
``` ```
```jsx ```jsx
<A v-model={[val, 'argument', ['modifier']]} /> <A v-model={[val, "argument", ["modifier"]]} />
``` ```
会变编译成： 会变编译成：
@@ -163,10 +161,10 @@ v-model
h(A, { h(A, {
argument: val, argument: val,
argumentModifiers: { argumentModifiers: {
modifier: true modifier: true,
}, },
'onUpdate:argument': $event => val = $event "onUpdate:argument": ($event) => (val = $event),
}) });
``` ```
v-models v-models
@@ -174,18 +172,23 @@ v-models
> 注意: 你应该传递一个二维数组给 v-models。 > 注意: 你应该传递一个二维数组给 v-models。
```jsx ```jsx
<A v-models={[[foo], [bar, 'bar']]} /> <A v-models={[[foo], [bar, "bar"]]} />
```
```jsx
<A v-models={[[foo, 'foo'], [bar, 'bar']]} />
``` ```
```jsx ```jsx
<A <A
v-models={[ v-models={[
[foo, ['modifier']], [foo, "foo"],
[bar, 'bar', ['modifier']], [bar, "bar"],
]}
/>
```
```jsx
<A
v-models={[
[foo, ["modifier"]],
[bar, "bar", ["modifier"]],
]} ]}
/> />
``` ```
@@ -198,13 +201,13 @@ h(A, {
modelModifiers: { modelModifiers: {
modifier: true, modifier: true,
}, },
'onUpdate:modelValue': $event => foo = $event, "onUpdate:modelValue": ($event) => (foo = $event),
bar: bar, bar: bar,
barModifiers: { barModifiers: {
modifier: true, modifier: true,
}, },
'onUpdate:bar': $event => bar = $event, "onUpdate:bar": ($event) => (bar = $event),
}) });
``` ```
自定义指令 自定义指令
@@ -213,31 +216,27 @@ h(A, {
const App = { const App = {
directives: { custom: customDirective }, directives: { custom: customDirective },
setup() { setup() {
return () => ( return () => <a v-custom={[val, "arg", ["a", "b"]]} />;
<a
v-custom={[val, 'arg', ['a', 'b']]}
/>
);
}, },
}; };
``` ```
### 插槽 ### 插槽
> 注意: 在 `jsx` 中，应该使用 **`v-slots`** 代替 *`v-slot`* > 注意: 在 `jsx` 中，应该使用 **`v-slots`** 代替 _`v-slot`_
```jsx ```jsx
const App = { const App = {
setup() { setup() {
const slots = { const slots = {
foo: () => <span>B</span> foo: () => <span>B</span>,
}; };
return () => ( return () => (
<A v-slots={slots}> <A v-slots={slots}>
<div>A</div> <div>A</div>
</A> </A>
); );
} },
}; };
// or // or
@@ -246,10 +245,10 @@ const App = {
setup() { setup() {
const slots = { const slots = {
default: () => <div>A</div>, default: () => <div>A</div>,
foo: () => <span>B</span> foo: () => <span>B</span>,
}; };
return () => <A v-slots={slots} />; return () => <A v-slots={slots} />;
} },
}; };
// or // or
@@ -260,14 +259,14 @@ const App = {
<A> <A>
{{ {{
default: () => <div>A</div>, default: () => <div>A</div>,
foo: () => <span>B</span> foo: () => <span>B</span>,
}} }}
</A> </A>
<B>{() => 'foo'}</B> <B>{() => "foo"}</B>
</> </>
); );
} },
} };
``` ```
### 在 TypeSript 中使用 ### 在 TypeSript 中使用

91
packages/babel-plugin-jsx/README.md
View File

@@ -58,9 +58,18 @@ Default: `true`
merge static and dynamic class / style attributes / onXXX handlers 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 ## Syntax
### Content ### Content
functional component functional component
```jsx ```jsx
@@ -73,12 +82,12 @@ with render
const App = { const App = {
render() { render() {
return <div>Vue 3.0</div>; return <div>Vue 3.0</div>;
} },
}; };
``` ```
```jsx ```jsx
import { withModifiers, defineComponent } from 'vue'; import { withModifiers, defineComponent } from "vue";
const App = defineComponent({ const App = defineComponent({
setup() { setup() {
@@ -89,12 +98,10 @@ const App = defineComponent({
}; };
return () => ( return () => (
<div onClick={withModifiers(inc, ['self'])}> <div onClick={withModifiers(inc, ["self"])}>{count.value}</div>
{count.value}
</div>
); );
} },
}) });
``` ```
Fragment Fragment
@@ -117,13 +124,8 @@ const App = () => <input type="email" />;
with a dynamic binding: with a dynamic binding:
```jsx ```jsx
const placeholderText = 'email'; const placeholderText = "email";
const App = () => ( const App = () => <input type="email" placeholder={placeholderText} />;
<input
type="email"
placeholder={placeholderText}
/>
);
``` ```
### Directives ### Directives
@@ -150,11 +152,11 @@ v-model
``` ```
```jsx ```jsx
<input v-model={[val, ['modifier']]} /> <input v-model={[val, ["modifier"]]} />
``` ```
```jsx ```jsx
<A v-model={[val, 'argument', ['modifier']]} /> <A v-model={[val, "argument", ["modifier"]]} />
``` ```
Will compile to: Will compile to:
@@ -163,10 +165,10 @@ Will compile to:
h(A, { h(A, {
argument: val, argument: val,
argumentModifiers: { argumentModifiers: {
modifier: true modifier: true,
}, },
'onUpdate:argument': $event => val = $event "onUpdate:argument": ($event) => (val = $event),
}) });
``` ```
v-models v-models
@@ -174,18 +176,23 @@ v-models
> Note: You should pass a Two-dimensional Arrays to v-models. > Note: You should pass a Two-dimensional Arrays to v-models.
```jsx ```jsx
<A v-models={[[foo], [bar, 'bar']]} /> <A v-models={[[foo], [bar, "bar"]]} />
```
```jsx
<A v-models={[[foo, 'foo'], [bar, 'bar']]} />
``` ```
```jsx ```jsx
<A <A
v-models={[ v-models={[
[foo, ['modifier']], [foo, "foo"],
[bar, 'bar', ['modifier']], [bar, "bar"],
]}
/>
```
```jsx
<A
v-models={[
[foo, ["modifier"]],
[bar, "bar", ["modifier"]],
]} ]}
/> />
``` ```
@@ -198,13 +205,13 @@ h(A, {
modelModifiers: { modelModifiers: {
modifier: true, modifier: true,
}, },
'onUpdate:modelValue': $event => foo = $event, "onUpdate:modelValue": ($event) => (foo = $event),
bar: bar, bar: bar,
barModifiers: { barModifiers: {
modifier: true, modifier: true,
}, },
'onUpdate:bar': $event => bar = $event, "onUpdate:bar": ($event) => (bar = $event),
}) });
``` ```
custom directive custom directive
@@ -213,31 +220,27 @@ custom directive
const App = { const App = {
directives: { custom: customDirective }, directives: { custom: customDirective },
setup() { setup() {
return () => ( return () => <a v-custom={[val, "arg", ["a", "b"]]} />;
<a
v-custom={[val, 'arg', ['a', 'b']]}
/>
);
}, },
}; };
``` ```
### 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 ```jsx
const App = { const App = {
setup() { setup() {
const slots = { const slots = {
foo: () => <span>B</span> foo: () => <span>B</span>,
}; };
return () => ( return () => (
<A v-slots={slots}> <A v-slots={slots}>
<div>A</div> <div>A</div>
</A> </A>
); );
} },
}; };
// or // or
@@ -246,13 +249,13 @@ const App = {
setup() { setup() {
const slots = { const slots = {
default: () => <div>A</div>, default: () => <div>A</div>,
foo: () => <span>B</span> foo: () => <span>B</span>,
}; };
return () => <A v-slots={slots} />; return () => <A v-slots={slots} />;
} },
}; };
// or // or you can use object slots when `enableObjectSlots` is not false.
const App = { const App = {
setup() { setup() {
return () => ( return () => (
@@ -260,14 +263,14 @@ const App = {
<A> <A>
{{ {{
default: () => <div>A</div>, default: () => <div>A</div>,
foo: () => <span>B</span> foo: () => <span>B</span>,
}} }}
</A> </A>
<B>{() => 'foo'}</B> <B>{() => "foo"}</B>
</> </>
); );
} },
} };
``` ```
### In TypeScript ### In TypeScript