在使用Vue开发中,使用组件时报了这么一个错误:

[Vue warn]: The data property "orderId" is already declared as a prop. Use prop default value instead.

翻译过来就是:

数据属性“orderId”已经声明为一个PROP。使用PROP默认值代替。

经过查找是在组件传值时,传过来了一个orderId,但是在我的项目data中也定义了一个orderId,

Vue源码中

if (props && hasOwn(props, key)) {
  process.env.NODE_ENV !== 'production' && warn(
    `The data property "${key}" is already declared as a prop. ` +
    `Use prop default value instead.`,
    vm
  )
} else if (!isReserved(key)) {
  proxy(vm, `_data`, key)
}

大致思路就是:访问data 和methods中的数据之外,还访问了props组件传递过来的值,如果发现data数据字段中的key值已经被定义,那么props传的参数再有这个重名的key值就会报这个错误。

props的优先级 > data中的优先级 > menthods中的优先级

代表,如果在这个key值在props中出现,那么data中的key值就不能定义了。

给大家看下我的错误:

exports default(){
    props:{
        orderId:Number
    },
    data(){
        return {
            orderId:'',
        }   
    }
}

想改正这个错误,把data中定义的字段删除就好。

文中源码出处文章:https://blog.csdn.net/nicexibeidage/article/details/82112143

Logo

前往低代码交流专区

更多推荐