docs: slots (#386)

* 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

View File

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

View File

@ -238,10 +238,17 @@ const App = {
> Note: In `jsx`, _`v-slot`_ should be replace with **`v-slots`**
```jsx
const A = (props, { slots }) => (
<>
<h1>{ slots.default ? slots.default() : 'foo' }</h1>
<h2>{ slots.bar?.() }</h2>
</>
);
const App = {
setup() {
const slots = {
foo: () => <span>B</span>,
bar: () => <span>B</span>,
};
return () => (
<A v-slots={slots}>
@ -257,7 +264,7 @@ const App = {
setup() {
const slots = {
default: () => <div>A</div>,
foo: () => <span>B</span>,
bar: () => <span>B</span>,
};
return () => <A v-slots={slots} />;
},
@ -271,7 +278,7 @@ const App = {
<A>
{{
default: () => <div>A</div>,
foo: () => <span>B</span>,
bar: () => <span>B</span>,
}}
</A>
<B>{() => "foo"}</B>