Vue+tsx使用slot没有被替换的问题,久久派带你了解更多相关信息。
目录
- 前言
- 发现问题
- 解决
- 后记
前言
最近自己准备写一个 UI
组件,想对 vue
的 2.x
、3.x
可以更深层次的掌握
在架构时,准备全部使用 tsx
书写组件
但遇到了 tsx
中使用 slot
的问题
发现问题
先写了一个基础的 card
组件:
card.tsx:
import Component from \'vue-class-component\'import VanUIComponent from \'@packs/common/VanUIComponent\'import { VNode } from \'vue\'import { Prop } from \'vue-property-decorator\'import { CardShadowEnum } from \'@packs/config/card\'@Componentexport default class Card extends VanUIComponent { @Prop({ type: String, default: undefined }) public headerPadding !: string | undefined @Prop({ type: String, default: \'\' }) public title !: string @Prop({ type: String, default: CardShadowEnum.Hover }) public shadow !: CardShadowEnum public static componentName = \'v-card\' public get wrapperClassName(): string { const list: string[] = [\'v-card__wrapper\'] list.push(`shadow-${ this.shadow }`) return list.join(\' \') } public render(): VNode { return ( <p class={ this.wrapperClassName }> <p class=\"v-card__header\" style={ { padding: this.headerPadding } }> { this.$slots.title ? <slot name=\"title\" /> : <p>{ this.title }</p> } </p> <p class=\"v-card__body\"> <slot name=\"default\" /> </p> <p class=\"v-card__footer\"></p> </p> ) }}
在 examples
中使用这个 v-card
的时候:
<template> <v-card> <template #title>1111</template> </v-card></template><script lang=\"ts\">import Vue from \'vue\'import Component from \'vue-class-component\'@Componentexport default class Components extends Vue {}</script><style lang=\"scss\" scoped>.components__wrapper { padding: 20px;}</style>
我发现渲染后,浏览器不替换 slot
标签:
我在百度、Google寻找了一天也没有解释,在官方文档中仔仔细细阅读后,也没有类似的提示,以及 jsx
编译器的文档中也没有写明,只是声明了如何使用命名 slot
。
解决
第二天,我一直在纠结这个,也查了 element-ui
、ant-design-vue
的 UI
组件库中如何书写,也没有找到对应的使用 jsx
使用 slot
的。
不甘放弃的我更换了搜索文字,于是终于找到解决方案,并将代码改为:
... public render(): VNode { return ( <p class={ this.wrapperClassName }> <p class=\"v-card__header\" style={ { padding: this.headerPadding } }> { this.$slots.title ?? <p>{ this.title }</p> } </p> <p class=\"v-card__body\"> <slot name=\"default\" /> </p> <p class=\"v-card__footer\"></p> </p> ) }...
再查看浏览器渲染:
问题解决
后记
在使用 jsx / tsx
时,如果 js
语法本身可以解决的,或本身注册在 this
上的方法,优先使用 js
去做,例如 v-if / v-else
可以使用 双目运算符
替代。实在没有可用的简便方法,再使用 vue
的指令做,例如 v-show
。
到此这篇关于Vue+tsx使用slot没有被替换的问题的文章就介绍到这了,更多相关Vue+tsx slot没有被替换内容请搜索趣讯吧以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣讯吧!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 55@qq.com 举报,一经查实,本站将立刻删除。转转请注明出处:https://www.szhjjp.com/n/10914.html