关于TSX中如何使用具名插槽的问题

来源:2-8 使用jsx开发vue3组件

LBruce

2021-01-04

老师您好,本人在开发中用到的技术栈是Vue3+TS以及ElementUI,遇到的问题是不知道如何在TSX中使用具名插槽,如图所示,el-submenu这个组件是通过具名插槽的方式指定标题的,但是在TSX的情况下,不知道该怎么使用插槽了,请老师指点,谢谢老师
图片描述

写回答

3回答

Jokcy

2021-01-04

在el-submenu上使用 v-slot={{ title: <> }} 这样

0
5
LBruce
回复
Jokcy
明白了,一切以官方为准
2021-01-07
共5条回复

LBruce

提问者

2021-01-07

按照老师说的,确实可行。不过运行后会提示“value encountered for slot "label". Prefer function slots for better performance. ”,为了消除这个提示,可以用return的方式。以下供其他同学参考

//img.mukewang.com/szimg/5ff6c8aa09ec82cb07380418.jpg

1
0

LBruce

提问者

2021-01-04

//img.mukewang.com/szimg/5ff329b709edf39407580205.jpg

老师的意思是这样吗?不过我这样写了之后,有一个warning提示“Failed to resolve directive: slot  at <SubMenu> ”

具体错误信息如下

//img.mukewang.com/szimg/5ff32a240996c96204610507.jpg

是少了依赖?还是?

0
0

Vue3.0+TS打造企业级组件库 前端中高级开发者必修课

深度匹配高级前端工程师用人需求 打造属于你自己的开源项目

1310 学习 · 250 问题

查看课程