Vue中默认插槽在渲染函数外调用的警告问题咨询
Vue中默认插槽在渲染函数外调用的警告问题咨询
嘿,我最近在Vue项目里碰到了一个警告,折腾了半天没完全摸透解决办法,来请教下大家~
先把我遇到的警告信息贴出来:
app.js:73 [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 <VDefaultsProvider key="content-defaults" defaults= {VImg: {…}, VIcon: {…}} > at <VAvatar size=58 class="mt-4" > at <VCard elevation="0" color="background" class="mt-8 ml-0 d-flex flex-col
我大概get到这个警告是说默认插槽在渲染函数外面被调用了,导致Vue没法追踪插槽里用到的响应式依赖,但具体怎么定位问题、怎么改还是有点懵。
我梳理了下可能的解决方向,也想听听大家的建议:
- 首先检查自定义组件的写法:我自己写的组件里有没有在
mounted、created这类生命周期钩子,或者某个方法、计算属性里直接调用了this.$slots.default()?如果有的话,得把这个调用移到render函数里,比如用h函数构建VNode的时候,直接在h的参数里调用插槽函数,这样Vue就能正常追踪依赖了。 - 因为警告栈里出现了Vuetify的组件(VDefaultsProvider、VAvatar这些),我也在想是不是用Vuetify组件时插槽传值的方式不对?比如有没有在某个异步方法里生成插槽内容再传进去?是不是应该直接在模板里写插槽内容,或者在渲染上下文里传递?
- 另外会不会是版本兼容的问题?我用的是Vue3 + Vuetify3,会不会是两者版本不匹配导致的?打算试试升级到最新的稳定版看看会不会消失。
还有个小疑问:如果我确实需要在外部处理插槽的内容,有没有什么合规的方式?比如能不能先在渲染函数里获取到插槽的VNode,再拿到外面处理?
麻烦大家给我支支招呀~
内容来源于stack exchange
相关产品推荐
相关产品推荐

