您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Vue+tsx使用slot沒(méi)有被替換的問(wèn)題怎么解決”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
前言
發(fā)現(xiàn)問(wèn)題
解決
后記
最近自己準(zhǔn)備寫(xiě)一個(gè) UI
組件,想對(duì) vue
的 2.x
、3.x
可以更深層次的掌握
在架構(gòu)時(shí),準(zhǔn)備全部使用 tsx
書(shū)寫(xiě)組件
但遇到了 tsx
中使用 slot
的問(wèn)題
先寫(xiě)了一個(gè)基礎(chǔ)的 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
中使用這個(gè) v-card
的時(shí)候:
<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>
我發(fā)現(xiàn)渲染后,瀏覽器不替換 slot
標(biāo)簽:
我在百度、Google尋找了一天也沒(méi)有解釋,在官方文檔中仔仔細(xì)細(xì)閱讀后,也沒(méi)有類(lèi)似的提示,以及 jsx
編譯器的文檔中也沒(méi)有寫(xiě)明,只是聲明了如何使用命名 slot
。
第二天,我一直在糾結(jié)這個(gè),也查了 element-ui
、ant-design-vue
的 UI
組件庫(kù)中如何書(shū)寫(xiě),也沒(méi)有找到對(duì)應(yīng)的使用 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> ) } ...
再查看瀏覽器渲染:
問(wèn)題解決
在使用 jsx / tsx
時(shí),如果 js
語(yǔ)法本身可以解決的,或本身注冊(cè)在 this
上的方法,優(yōu)先使用 js
去做,例如 v-if / v-else
可以使用 雙目運(yùn)算符
替代。實(shí)在沒(méi)有可用的簡(jiǎn)便方法,再使用 vue
的指令做,例如 v-show
。
“Vue+tsx使用slot沒(méi)有被替換的問(wèn)題怎么解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。