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

您的位置:首頁技術文章
文章詳情頁

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

瀏覽:8日期:2023-02-16 11:34:28
目錄前言發現問題解決后記前言

最近自己準備寫一個 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 ( <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 中使用這個 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 標簽:

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

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

解決

第二天,我一直在糾結這個,也查了 element-ui 、ant-design-vue 的 UI 組件庫中如何書寫,也沒有找到對應的使用 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 時,如果 js 語法本身可以解決的,或本身注冊在 this 上的方法,優先使用 js 去做,例如 v-if / v-else 可以使用 雙目運算符 替代。實在沒有可用的簡便方法,再使用 vue 的指令做,例如 v-show 。

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

標簽: Vue
相關文章:
主站蜘蛛池模板: 快速门厂家-快速卷帘门-工业快速门-硬质快速门-西朗门业 | 南京租车,南京汽车租赁,南京包车,南京会议租车-南京七熹租车 | 武汉高低温试验机-现货恒温恒湿试验箱-高低温湿热交变箱价格-湖北高天试验设备 | 西门子气候补偿器,锅炉气候补偿器-陕西沃信机电工程有限公司 | 刑事律师_深圳著名刑事辩护律师_王平聚【清华博士|刑法教授】 | 垃圾清运公司_环卫保洁公司_市政道路保洁公司-华富环境 | 冷热冲击试验箱_温度冲击试验箱价格_冷热冲击箱排名_林频厂家 | 精密线材测试仪-电线电缆检测仪-苏州欣硕电子科技有限公司 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 爱科技iMobile-专业的科技资讯信息分享网站 | 上海电子秤厂家,电子秤厂家价格,上海吊秤厂家,吊秤供应价格-上海佳宜电子科技有限公司 | 模切之家-专注服务模切行业的B2B平台!| 视频直播 -摄影摄像-视频拍摄-直播分发 | 留学生辅导网-在线课程论文辅导-留学生挂科申诉机构 | 3A别墅漆/3A环保漆_广东美涂士建材股份有限公司【官网】 | 影像测量仪_三坐标测量机_一键式二次元_全自动影像测量仪-广东妙机精密科技股份有限公司 | 超声波焊接机_超音波熔接机_超声波塑焊机十大品牌_塑料超声波焊接设备厂家 | 低浓度恒温恒湿称量系统,强光光照培养箱-上海三腾仪器有限公司 | 郑州墨香品牌设计公司|品牌全案VI设计公司| HDPE土工膜,复合土工膜,防渗膜价格,土工膜厂家-山东新路通工程材料有限公司 | 煤矿支护网片_矿用勾花菱形网_缝管式_管缝式锚杆-邯郸市永年区志涛工矿配件有限公司 | bng防爆挠性连接管-定做金属防爆挠性管-依客思防爆科技 | 宿舍管理系统_智慧园区系统_房屋/房产管理系统_公寓管理系统 | 冷镦机-多工位冷镦机-高速冷镦机厂家-温州金诺机械设备制造有限公司 | 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | MVR蒸发器厂家-多效蒸发器-工业废水蒸发器厂家-康景辉集团官网 | 螺旋压榨机-刮泥机-潜水搅拌机-电动泥斗-潜水推流器-南京格林兰环保设备有限公司 | 南京技嘉环保科技有限公司-杀菌除臭剂|污水|垃圾|厕所|橡胶厂|化工厂|铸造厂除臭剂 | 罗茨真空机组,立式无油往复真空泵,2BV水环真空泵-力侨真空科技 | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 利浦顿蒸汽发生器厂家-电蒸汽发生器/燃气蒸汽发生器_湖北利浦顿热能科技有限公司官网 | 太原装修公司_山西整装家装设计_太原室内装潢软装_肖邦家居 | 章丘丰源机械有限公司 - 三叶罗茨风机,罗茨鼓风机,罗茨风机 | 巨野电机维修-水泵维修-巨野县飞宇机电维修有限公司 | 大立教育官网-一级建造师培训-二级建造师培训-造价工程师-安全工程师-监理工程师考试培训 | 江门流水线|江门工作台|江门市伟涛行工业设备有限公司 | 欧版反击式破碎机-欧版反击破-矿山石料破碎生产线-青州奥凯诺机械 | 新型游乐设备,360大摆锤游乐设备「诚信厂家」-山东方鑫游乐设备 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 户外-组合-幼儿园-不锈钢-儿童-滑滑梯-床-玩具-淘气堡-厂家-价格 |