【Vue】Property or method “scope“ is not defined on the instance but referenced during render. Make su

问题描述

今天在修改老项目的过程中发现了一个警告：

[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”