电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Vue+tsx使用slot沒有被替換的問題

瀏覽:7日期:2023-02-16 11:34:28
目錄前言發(fā)現(xiàn)問題解決后記前言

最近自己準(zhǔn)備寫一個(gè) UI 組件,想對 vue 的 2.x、3.x 可以更深層次的掌握

在架構(gòu)時(shí),準(zhǔn)備全部使用 tsx 書寫組件

但遇到了 tsx 中使用 slot 的問題

發(fā)現(xiàn)問題

先寫了一個(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’@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 ( <div class={ this.wrapperClassName }><div 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’@Componentexport default class Components extends Vue {}</script><style lang='scss' scoped>.components__wrapper { padding: 20px;}</style>

我發(fā)現(xiàn)渲染后,瀏覽器不替換 slot 標(biāo)簽:

Vue+tsx使用slot沒有被替換的問題

我在百度、Google尋找了一天也沒有解釋,在官方文檔中仔仔細(xì)細(xì)閱讀后,也沒有類似的提示,以及 jsx 編譯器的文檔中也沒有寫明,只是聲明了如何使用命名 slot。

解決

第二天,我一直在糾結(jié)這個(gè),也查了 element-ui 、ant-design-vue 的 UI 組件庫中如何書寫,也沒有找到對應(yīng)的使用 jsx 使用 slot 的。

不甘放棄的我更換了搜索文字,于是終于找到解決方案,并將代碼改為:

... public render(): VNode { return ( <div class={ this.wrapperClassName }><div 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> ) }...

再查看瀏覽器渲染:

Vue+tsx使用slot沒有被替換的問題

問題解決

后記

在使用 jsx / tsx 時(shí),如果 js 語法本身可以解決的,或本身注冊在 this 上的方法,優(yōu)先使用 js 去做,例如 v-if / v-else 可以使用 雙目運(yùn)算符 替代。實(shí)在沒有可用的簡便方法,再使用 vue 的指令做,例如 v-show 。

到此這篇關(guān)于Vue+tsx使用slot沒有被替換的問題的文章就介紹到這了,更多相關(guān)Vue+tsx slot沒有被替換內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 3d打印服务,3d打印汽车,三维扫描,硅胶复模,手板,快速模具,深圳市精速三维打印科技有限公司 | 模具钢_高速钢_不锈钢-万利钢金属材料| 淘剧影院_海量最新电视剧,免费高清电影随心观看 | 哲力实业_专注汽车涂料汽车漆研发生产_汽车漆|修补油漆品牌厂家 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | vr安全体验馆|交通安全|工地安全|禁毒|消防|安全教育体验馆|安全体验教室-贝森德(深圳)科技 | 祝融环境-地源热泵多恒系统高新技术企业,舒适生活环境缔造者! | 新疆系统集成_新疆系统集成公司_系统集成项目-新疆利成科技 | 沈阳建筑设计公司_加固改造设计_厂房设计_设计资质加盟【金辉设计】 | 民用音响-拉杆音响-家用音响-ktv专用音响-万昌科技 | 高压互感器,电流互感器,电压互感器-上海鄂互电气科技有限公司 | 找培训机构_找学习课程_励普教育| 宽带办理,电信宽带,移动宽带,联通宽带,电信宽带办理,移动宽带办理,联通宽带办理 | 不锈钢螺丝 - 六角螺丝厂家 - 不锈钢紧固件 - 万千紧固件--紧固件一站式采购 | 东莞ERP软件_广州云ERP_中山ERP_台湾工厂erp系统-广东顺景软件科技有限公司 | 双菱电缆-广州电缆厂_广州电缆厂有限公司 | 跨境物流_美国卡派_中大件运输_尾程派送_海外仓一件代发 - 广州环至美供应链平台 | 超声波焊接机,振动摩擦焊接机,激光塑料焊接机,超声波焊接模具工装-德召尼克(常州)焊接科技有限公司 | 【孔氏陶粒】建筑回填陶粒-南京/合肥/武汉/郑州/重庆/成都/杭州陶粒厂家 | 成都茶楼装修公司 - 会所设计/KTV装修 - 成都朗煜装饰公司 | 自清洗过滤器-全自动自清洗过反冲洗过滤器 - 中乂(北京)科技有限公司 | 定硫仪,量热仪,工业分析仪,马弗炉,煤炭化验设备厂家,煤质化验仪器,焦炭化验设备鹤壁大德煤质工业分析仪,氟氯测定仪 | 湖南成人高考报名-湖南成考网 | 贴板式电磁阀-不锈钢-气动上展式放料阀-上海弗雷西阀门有限公司 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 | 尚为传动-专业高精密蜗轮蜗杆,双导程蜗轮蜗杆,蜗轮蜗杆减速机,蜗杆减速机生产厂家 | 橡胶接头|可曲挠橡胶接头|橡胶软接头安装使用教程-上海松夏官方网站 | 领先的大模型技术与应用公司-中关村科金 | 洛阳装修公司-洛阳整装一站式品牌-福尚云宅装饰 | 湖南成人高考报名-湖南成考网| ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 网站优化公司_SEO优化_北京关键词百度快速排名-智恒博网络 | 智能型高压核相仪-自动开口闪点测试仪-QJ41A电雷管测试仪|上海妙定 | 雷达液位计_超声波风速风向仪_雨量传感器_辐射传感器-山东风途物联网 | 猪I型/II型胶原-五克隆合剂-细胞冻存培养基-北京博蕾德科技发展有限公司 | 北京京云律师事务所| 工业冷却塔维修厂家_方形不锈钢工业凉水塔维修改造方案-广东康明节能空调有限公司 | 无菌水质袋-NASCO食品无菌袋-Whirl-Pak无菌采样袋-深圳市慧普德贸易有限公司 | 岸电电源-60HZ变频电源-大功率变频电源-济南诚雅电子科技有限公司 | 恒温油槽-恒温水槽-低温恒温槽厂家-宁波科麦仪器有限公司 | 存包柜厂家_电子存包柜_超市存包柜_超市电子存包柜_自动存包柜-洛阳中星 | 吉林污水处理公司,长春工业污水处理设备,净水设备-长春易洁环保科技有限公司 | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 |