解决微信小程序 [Component] slot ““ is not found.

解决方式

当使用自定义组件或者slot标签作为组件A的插槽内容时,在组件A中必须定义一个默认插槽,对普通view等标签无限制。且因为wx:iffalse的插槽等同没有定义

场景复现(仅以自己遇到情况为例)

1、调试基础库2.19.4
2、使用weapp 的组件包,以其中的van-search 组件为例
3、在任意页面中使用 van-search,控制台会出现[Component] slot "" is not found.的警告,不影响程序运行,只是看着不爽

排查过程

按照报错的字面意思 为 使用了一个未定义的默认插槽
先看正常的默认插槽用例
例有:自定义组件custom

//自定义组件  custom
<view>
    <slot></slot>
</view>

在另外一个组件|页面home中使用custom

//  home
<custom>
    <view>22</view>
</custom>

以上用法就是使用默认插槽,且控制台不会有任何警告,即使把custom中的slot去掉也不会有警告出现,但是当把自定义组件或者是一个slot标签作为插槽的内容,且custom中没有默认插槽,就会出现[Component] slot "" is not found.的警告

van-search 为例,在van-search中存在这么一段结构
在这里插入图片描述
这里是以两个slot作为van-filed的插槽内容,进入到van-filed 会发现并没有定义默认插槽,此时在van-field的任意位置添加一个默认插槽,刷新之后控制台不会出现之前的警告信息

再以van-popup为例,虽然有默认slot但是因为wx:if 初始值为false导致初始解析时跳过
在这里插入图片描述

注意

添加一个不影响显示的 插槽并不是一个最好的办法,仅仅是为了不出现警告信息

补充

虽然设置display:none可以不显示无用的默认插槽,但终究会可能加载这块无用内容,可以考虑联合使用 wx:if=“visible”,不过visible默认值为true,通过定时器或者其他加载之后的时机,将visible变为false
在这里插入图片描述

在这里插入图片描述
不过,这种方法会引入另一个问题
[Component] slot "" duplication is found under a single shadow root. The first one was accepted
字面意思,有两个slot ,采用了第一个,主要代码如下
在这里插入图片描述

发现是我们添加的用于避免出现slot 未找到异常的代码块出现的问题,因为当弹窗显示的时候,上下两个slot 都是可以被解析到的,因此给出个提示告诉我们有两个slot,程序不知道要显示那个,因此就给你显示了第一个,大胆猜测,如果代码解析过程中第一个slot不合适,但是之后有合适的slot就不会给出这个提示,修改如下
在这里插入图片描述
警告消失

参考

其他博主的解析描述

总结

追根究底这是开发工具的问题,当然给出这类警告本身是无可厚非的,通过hack的方式,虽然可以解决,但是并不是最好的方法

  • 19
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值