解决微信小程序 [Component] slot ““ is not found.
解决方式当使用自定义组件或者slot标签作为组件A的插槽内容时,在组件A中必须定义一个默认插槽,对普通view等标签无限制。场景复现(仅以自己遇到情况为例)1、调试基础库2.19.42、使用weapp 的组件包,以其中的van-search组件为例3、在任意页面中使用van-search,控制台会出现[Component] slot "" is not found.的警告,不影响程序运行,只是看着
解决方式
当使用自定义组件
或者slot标签
作为组件A
的插槽内容时,在组件A
中必须定义一个默认插槽,对普通view等标签无限制。且因为wx:if
为false
的插槽等同没有定义
场景复现(仅以自己遇到情况为例)
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的方式,虽然可以解决,但是并不是最好的方法
更多推荐
所有评论(0)