Vue+tsx使用slot没有被替换的问题
程序员文章站
2022-03-03 11:01:05
目录前言最近自己准备写一个 ui 组件,想对 vue 的 2.x、3.x 可以更深层次的掌握在架构时,准备全部使用 tsx 书写组件但遇到了 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' @component export 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 ( <div class={ this.wrapperclassname }> <div class="v-card__header" style={ { padding: this.headerpadding } }> { this.$slots.title ? <slot name="title" /> : <div>{ this.title }</div> } </div> <div class="v-card__body"> <slot name="default" /> </div> <div class="v-card__footer"></div> </div> ) } }
在 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' @component export 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 ( <div class={ this.wrapperclassname }> <div class="v-card__header" style={ { padding: this.headerpadding } }> { this.$slots.title ?? <div>{ this.title }</div> } </div> <div class="v-card__body"> <slot name="default" /> </div> <div class="v-card__footer"></div> </div> ) } ...
再查看浏览器渲染:
问题解决
后记
在使用 jsx / tsx
时,如果 js
语法本身可以解决的,或本身注册在 this
上的方法,优先使用 js
去做,例如 v-if / v-else
可以使用 双目运算符
替代。实在没有可用的简便方法,再使用 vue
的指令做,例如 v-show
。
到此这篇关于vue+tsx使用slot没有被替换的问题的文章就介绍到这了,更多相关vue+tsx slot没有被替换内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: 银耳汤要煮多久
下一篇: 关于Redis数据持久化的概念介绍