From 76add10663c0f66c47897f3639a8ff3f01dfc765 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Sat, 9 Jan 2021 21:18:32 +0800 Subject: [PATCH] docs: `enableObjectSlots` --- packages/babel-plugin-jsx/README-zh_CN.md | 87 +++++++++++---------- packages/babel-plugin-jsx/README.md | 93 ++++++++++++----------- 2 files changed, 91 insertions(+), 89 deletions(-) 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