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

docs: slots (#386)

Browse Source 
* feat(md): add <slot/> to jsx md

Co-authored-by: GetKnowledge <xxx@qq.com>
This commit is contained in:
GetKnowledgeByGitHub 2021-04-12 13:15:44 +08:00 committed by GitHub
parent 0e4a660a60
commit 5c798bae84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -234,10 +234,17 @@ const App = {
> 注意: 在 `jsx` 中，应该使用 **`v-slots`** 代替 _`v-slot`_ > 注意: 在 `jsx` 中，应该使用 **`v-slots`** 代替 _`v-slot`_
```jsx ```jsx
const A = (props, { slots }) => (
<>
<h1>{ slots.default ? slots.default() : 'foo' }</h1>
<h2>{ slots.bar?.() }</h2>
</>
);
const App = { const App = {
setup() { setup() {
const slots = { const slots = {
foo: () => <span>B</span>, bar: () => <span>B</span>,
}; };
return () => ( return () => (
<A v-slots={slots}> <A v-slots={slots}>
@ -253,7 +260,7 @@ const App = {
setup() { setup() {
const slots = { const slots = {
default: () => <div>A</div>, default: () => <div>A</div>,
foo: () => <span>B</span>, bar: () => <span>B</span>,
}; };
return () => <A v-slots={slots} />; return () => <A v-slots={slots} />;
}, },
@ -267,7 +274,7 @@ const App = {
<A> <A>
{{ {{
default: () => <div>A</div>, default: () => <div>A</div>,
foo: () => <span>B</span>, bar: () => <span>B</span>,
}} }}
</A> </A>
<B>{() => "foo"}</B> <B>{() => "foo"}</B>

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

@ -238,10 +238,17 @@ const App = {
> 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 A = (props, { slots }) => (
<>
<h1>{ slots.default ? slots.default() : 'foo' }</h1>
<h2>{ slots.bar?.() }</h2>
</>
);
const App = { const App = {
setup() { setup() {
const slots = { const slots = {
foo: () => <span>B</span>, bar: () => <span>B</span>,
}; };
return () => ( return () => (
<A v-slots={slots}> <A v-slots={slots}>
@ -257,7 +264,7 @@ const App = {
setup() { setup() {
const slots = { const slots = {
default: () => <div>A</div>, default: () => <div>A</div>,
foo: () => <span>B</span>, bar: () => <span>B</span>,
}; };
return () => <A v-slots={slots} />; return () => <A v-slots={slots} />;
}, },
@ -271,7 +278,7 @@ const App = {
<A> <A>
{{ {{
default: () => <div>A</div>, default: () => <div>A</div>,
foo: () => <span>B</span>, bar: () => <span>B</span>,
}} }}
</A> </A>
<B>{() => "foo"}</B> <B>{() => "foo"}</B>