[Vue warn]: The data property "panelShow" is already declared as a prop

最新推荐文章于 2025-07-10 09:09:29 发布

ruanhongbiao

最新推荐文章于 2025-07-10 09:09:29 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： js vue

本文链接：https://blog.youkuaiyun.com/qappleh/article/details/89713840

vue.js 专栏收录该内容

28 篇文章

订阅专栏

本文详细解析了在Vue开发中，当组件的Props与Data中存在相同属性时，如何避免错误提示。通过理解Vue的数据访问机制，阐述了Props的优先级高于Data，并提供了解决方案。

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

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

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

翻译过来就是：

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

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

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:{
        panelShow:Number
    },
    data(){
        return {
            panelShow:'',
        }   
    }
}

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

文中源码出处文章：https://blog.youkuaiyun.com/nicexibeidage/article/details/82112143