Slot "default" invoked outside of the render function
NutUI scenes(nutui 场景)
小程序(@nutui/nutui-taro)
NutUI-vue version(nutui-vue 版本)
4.0.9
Vue version(vue 版本)
3.3.4
Operating environment(运行环境)
dev:weapp
Citation method(引用方式)
npm
Node version(node 版本)
v18.16.0
Browser and its version(浏览器及其版本)
版本 108.0.5359.124(正式版本) (arm64)
System and its version(系统及其版本)
MacOS 11.3
Taro environmental information(taro 环境信息)
Taro v3.6.7
Reproduction link(重现链接)
Steps to reproduce(重现步骤)
只要用jsx写法就会出现这种警告,包括form组件也会出现这种情况
return () => ( <div> <nut-collapse> <nut-collapse-item title="title" name="0"> aaaaaaaaa </nut-collapse-item> </nut-collapse> </div> );
What is expected?(期望的结果是什么?)
没有警告
What is actually happening?(实际的结果是什么?)
._node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:41 [Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. at <NutCollapseItem title="title" name="0" > at <NutCollapse> at <Index tid="pages/test/index?$taroTimestamp=1687076642152" option= {} > at <Anonymous key="pages/test/index?$taroTimestamp=1687076642152" > at <App>
排查原因发现是 Collapse 组件中在模板渲染之外的地方用到了 slots.default(),主要是为了监听子组件变化以重新初始化组件。
测试了在 @vitejs/plugin-vue-jsx 下是正常的,在 @vue/babel-plugin-jsx 中则会报警告,但不影响使用。
其他几个组件也有类似的逻辑,需要进一步优化。