Vue3.0 在 JSX/TSX 下如何使用插槽(slot)

在文档上没找到,使用搜索引擎也没见有人发表相关内容。最后在 vuejs/jsx-next 这个 repo 的 README.md 找到了解决方案,在这里分享给各位。

官方文档示例

注意: 在 jsx 中,应该使用 v-slots 代替 v-slot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const App = {
setup() {
const slots = {
foo: () => <span>B</span>
};
return () => (
<A v-slots={slots}>
<div>A</div>
</A>
);
}
};

// or

const App = {
setup() {
const slots = {
default: () => <div>A</div>,
foo: () => <span>B</span>
};
return () => <A v-slots={slots} />;
}
};

个人示例

xxx.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<van-image
round
width="7rem"
height="7rem"
fit="cover"
src="/img/AquaMinato.png"
style="display: block; margin: 0 auto;"
>
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
<template v-slot:error>加载失败</template>
</van-image>

这里我虽然用的是TSX (TypeScript的JSX),但用法应该和JSX是一样的。

xxx.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
setup() {
const slots = {
loading: () => <van-loading type="spinner" size="20" />,
error: () => <span>加载失败</span>
}

return () => (
<div>
<van-image
round
width="7rem"
height="7rem"
fit="cover"
src="/img/AquaMinato.png"
style="display: block; margin: 0 auto;"
v-slots={slots}
>
</van-image>
</div>
)
}

解构插槽Props

在template写法中:

1
2
3
4
5
6
7
8
9
<router-link
to="/about"
custom
v-slot="{ href, route, navigate, isActive, isExactActive }"
>
<NavLink :active="isActive" :href="href" @click="navigate">
{{ route.fullPath }}
</NavLink>
</router-link>

在JSX写法中可以则可以是这样:

1
2
3
4
5
6
7
8
9
10
11
12
<router-link
to="/about"
custom
>
{{
default: ({ href, route, navigate, isActive, isExactActive }) => (
<NavLink active={isActive} href={href} click={navigate}>
{ route.fullPath }
</NavLink>
)
}}
</router-link>
作者

PinkChampagne17

发布于

2020-12-03

更新于

2021-07-24

许可协议

 CC BY-NC-SA 4.0