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

最新推荐文章于 2024-11-11 10:11:24 发布

周小航.

最新推荐文章于 2024-11-11 10:11:24 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文探讨了在Vue和uniapp开发中遇到的关于数据属性'userId'冲突问题，如何通过调整props和data中的变量名避免Vue警告。解决方法是将data中的userId更改为非冲突的变量名，如'Id'，以确保组件间数据传递的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Vue和uniapp开发中，使用组件时报了这么一个错误：

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

翻译过来就是：

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

经过查找是使用props组件传值时，也传过来了一个userId，但是在我的项目data中也定义了一个userId，所以是变量名重复导致的报错。

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

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

如果这个key值（声明的变量名）在props中出现，那么data中的key值（声明的变量名）就不能定义了。

给大家看下我的错误：

exports default(){
  props: ["conceal", "personid", "userId"],
    data(){
        return {
            userId:'',
        }   
    }
}

想改正这个错误，把data中定义的字段删除或者重新换一个变量名就好，如下：

exports default(){
  props: ["conceal", "personid", "userId"],
    data(){
        return {
            Id:'',
        }   
    }
}