在文档上没找到,使用搜索引擎也没见有人发表相关内容。最后在 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> ); } };
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>
|