mirror of
https://github.com/vuejs/babel-plugin-jsx.git
synced 2024-11-10 09:39:14 +08:00
docs: slots (#386)
* feat(md): add <slot/> to jsx md Co-authored-by: GetKnowledge <xxx@qq.com>
This commit is contained in:
parent
0e4a660a60
commit
5c798bae84
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user