解决微信小程序 [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的方式,虽然可以解决,但是并不是最好的方法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/506978.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

列表排序应用FLIP动画(vue)

效果 原理详解 链接 1.beforeUpdate 获取first 变化前位置 (以id建立map映射) 2.updated 获取变化后位置 last 3.禁用transition并transform元素回初始位置 4.异步恢复transition 并取消 transform 代码 <template><div ref"container"><div style&…

面试项目亮点_码农:面试被问到自己项目亮点时,感觉自己的回答虚伪的不行!...

据我个人观察&#xff0c;大多数程序员都对自己现有的项目有吐糟的习惯&#xff0c;比如吐糟代码逻辑混乱&#xff0c;代码规范问题&#xff0c;代码可读性差&#xff0c;代码没有注释&#xff0c;没有文档&#xff0c;代码极度冗余等等&#xff0c;总之满眼看到的都是一些缺陷…

微信小程序 仿 SwipeCell 的滑动单元格 SwipeBox

效果 代码 页面 调用Page <block wx:for"{{4}}" wx:key"{{item}}"><view style"text-align:center;padding:20px"><swipe-box><view slot"left" style"">左侧内容</view><view class&q…

u852日期限制解决补丁_《赛博朋克》1.06补丁出炉:进一步提升主机版本稳定性...

《赛博朋克2077》虽说是出师不利&#xff0c;但是开发商CDPR承诺自己会持续优化这款“尚待打磨”的作品&#xff0c;这种态度还是要稍微肯定一下的。我们看到之前CDPR就已经推送了1.05补丁&#xff0c;修复了大量的BUG以及问题&#xff0c;并且以游戏主机的BUG修复为重点&#…

微信小程序原生横向步骤条steps

效果 代码 调用 <rug-step options"{{steps}}" active"{{stepActive}}"></rug-step>steps: [{ label: 步骤1 },{ label: 步骤步骤步骤步骤2 },{ label: 步骤3 },{ label: 步骤步骤步骤步骤步骤4 },{ label: 步骤4 },{ label: 步骤4 },{ label…

华为云 手机 电脑登录不了怎么办 账户_华为云手机能解决芯片困难,是否真的实在,来西瓜视频找答案...

最近&#xff0c;网上到处流传着华为发布鲲鹏云手机的信息&#xff0c;有人说这个云手机能化解华为眼下的芯片燃眉之急的样子。事实真的如此吗?小编最近关注到&#xff0c;华为的鲲鹏云手机又成为大家关注和谈论的热点&#xff0c;甚至还有人说&#xff0c;华为有了云手机&…

单选复选状态控制类

场景 不同的平台写基础组件&#xff0c;写累了&#xff0c;对于单选复选这种逻辑闭合的组件&#xff0c;javascript 控制脚本是可以完全独立出来的&#xff0c;仅对外暴露状态即可根据不同的平台和环境进行视图的渲染 效果 使用 初始化 let selector new Selector({key: va…

康普顿效应是弹性碰撞吗_如何正确解读物理实验结果系列之十二——康普顿效应与光子...

作者&#xff1a;彭晓韬日期&#xff1a;2020年01月10日[文章摘要]&#xff1a;康普顿效应和光电效应一样&#xff0c;被广泛认定为支持光为光子的重要证据之一。但光电效应因无法解释紫限&#xff08;高于一定频率的光也不能产生光电效应&#xff09;现象而倍受质疑。同样地&a…

前端 滑动拼图校验 纯js组合式调用

前端 滑动拼图校验 纯js组合式调用效果思路代码效果 思路 独立滑块和拼图&#xff0c;通过实例方法组合使用,滑块和拼图均通过指定元素容器加载内容通过canvas 路径切片 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF…

前端处理取消选择文件动作

背景 项目中用到各种选择文件&#xff0c;且有很大一部分操作几乎相同&#xff0c;想要尽可能的简化选择上传文件的步骤&#xff0c;因此选择脚本生成 <input type"file"/> 标签的形式完成函数式的上传文件调用&#xff0c;但是如果打开了文件管理器但是并未选…

methods vue过滤器 和_数据动态过滤技巧在 Vue 项目中的实践

这个问题是在下在做一个 Vue 项目中遇到的实际场景&#xff0c;这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -。-)&#xff0c;过程中会涉及到一些Vue源码的概念比如 $mount、 render watcher等&#xff0c;如果不太了解的话可以瞅瞅 Vue源码阅读系列…

两条边延长角会有什么变化_田园易经:什么样的风水环境会影响人的健康?

“气之聚&#xff0c;有水以界之&#xff0c;无风以散之。皆言风与水&#xff0c;故谓之风水”这是古人对于风水的解释。风水&#xff0c;其实是《伏羲先天六十四卦方圆图》中的一个卦&#xff0c;西晋的郭璞&#xff0c;第一次把它单独提出来&#xff0c;风水是65涣卦&#xf…

afm原子力分析软件_牛津仪器发布全新大样品原子力显微镜Jupiter XR

2月27日&#xff0c;牛津仪器Asylum Research宣布推出新型原子力显微镜(AFM)——Jupiter XR™ AFM&#xff0c;这是一款能够利用单一扫描器同时提供全自动、多功能、高扫描速度和高精度的大样品AFM。全新大样品原子力显微镜Jupiter XR™ AFMJupiter XR™提供超过210 mm的样品空…

东方卫视收视率查询_肖战被嘲撑不起跨年收视率,看了东方卫视收视曲线,这锅不背!...

每当跨年晚会的时候&#xff0c;各大地方台就会拿出看家本领&#xff0c;都想在新年的最后一天一举夺魁。往年湖南卫视一直独占鳌头&#xff0c;今年东方卫视的阵容也很值得看一看。黄景瑜迪丽热巴、肖战杨紫&#xff0c;两对顶流cp同台演出&#xff0c;这么强大的阵容足以和其…

三运放差分放大电路分析_信号源内阻对差动放大电路共模抑制比的影响分析与改善方法...

点击蓝字关注我们《差动放大电路中电阻误差对电路共模抑制比的影响与蒙特卡洛分析》一文&#xff0c;介绍在差动放大电路设计时匹配电阻精度造成的影响&#xff0c;而在差动放大电路应用中还有一个不可忽略的因素——信号源内阻。本篇对信号源内阻在差动放大电路的共模抑制比影…

计算机网络学习笔记(一)——分层模型、协议、服务、连接模式、标准化组织

文章目录前言概念一、两种参考模型二、协议和实体三、封装和解封四、服务&#xff08;接口、SAP、原语&#xff09;五、面向连接和面向无连接六、虚通信与透明通信七、标准和标准化组织八、服务模式参考资料前言 笔者系电子科技大学2019级在读本科生&#xff0c;针对本学期学校…

shell 脚本比较字符串相等_LINUX快速入门第十六章:Shell 流程控制

Shell 流程控制和Java、PHP等语言不一样&#xff0c;sh的流程控制不可为空&#xff0c;如(以下为PHP流程控制写法)&#xff1a;<?phpif (isset($_GET["q"])) { search(q);}else { // 不做任何事情}在sh/bash里可不能这么写&#xff0c;如果else分支没有语句执行&…

计算机网络学习笔记(二)——物理层、奈奎斯特/香农定理、物理接口、传输介质、交换、电信网络、无线网络

文章目录前言概念一、物理层功能二、信道容量三、物理层接口规范四、常见的传输介质五、传统电信网关键技术和结构六、电信网的演进七、无线通信系统参考资料前言 笔者系电子科技大学2019级在读本科生&#xff0c;针对本学期学校开设的计算机通信网课程&#xff0c;将学习笔记…

只引入部分elementui_腾讯动漫确定引入假面骑士亚极陀和甲斗王 四仔:是不是玩不起...

假面骑士系列在国内成功实现了版权化之后&#xff0c;基本上目前的大环境和事态是被诶腾讯动漫平台独家垄断的节奏&#xff0c;不过目前其持有的假面骑士系列的作品旧十年基本上只涉及到了帝骑哥&#xff0c;近期官方公开进行了暗示&#xff0c;表示会引入假面骑士agitΩ还有假…

关于面向用户设计的反思——顶点计划3课程的Process Book

一、 开始的开始——调研、还是调研、一直在路上…… 在只有关于疫情给老年人的带来的问题大方向下&#xff0c;我去到街上随机的拉老年人进行调研。这是我第一次如此频繁的跟陌生老年人沟通。此期间&#xff0c;跟他们的沟通中我发现除了口音上的差异&#xff0c;还有更多的是…