问题描述
今天在修改老项目的过程中发现了一个警告:
[Vue warn]: Property or method "scope" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
原因分析
-
slot-scope="scope"
这样的写法是用在Vue.js 2.5 版本及更早的版本
中,用于处理组件的插槽(slot)。 -
而
v-slot="scope"
这样的写法是从Vue.js 2.6.0 版本开始引入的新语法
,用于简化处理作用域插槽(scoped slot)。这个新的写法让代码更加简洁易读,是推荐在 Vue.js 2.6.0 及之后的版本中使用的方式。
但项目中的vue版本是2.5.16,但代码中用到了高版本才支持的v-slot
,导致报此警告。
解决方案
将v-slot=“scope” 换成slot-scope=“scope”