如何修复Vue警告：数据属性已被声明为prop，请使用prop默认值代替

• Prop无默认值警告：DashboardCard组件中声明的isData属性仅定义了类型约束，未设置默认值，Vue检测到该属性未被传递时会抛出对应警告。
• 命名冲突警告：CompanyProfile组件通过extends继承了DashboardCard的所有配置，导致DashboardCard的isData prop已经被注册到CompanyProfile实例上，而你又在CompanyProfile的data选项中重复声明了同名的isData字段，触发属性命名冲突警告。

你可以根据自己的使用场景选择以下两种方案： #

方案一：保留继承逻辑 #

如果你确实需要复用DashboardCard的内置方法、生命周期等逻辑，用这个方案：

1. 给DashboardCard的isData prop添加默认值，修改对应代码：

// DashboardCard的props配置
props: {
  isData: {
    type: String,
    default: "" // 新增默认值，和你初始化的空字符串对齐
  },
  // 其余原有prop保持不变
}

2. 删除CompanyProfile的data中重复的isData声明：

// CompanyProfile的data配置
data() {
  return {
    profile: {}
    // 删掉原来的isData: ""语句
  };
},

方案二：移除继承（更推荐常规场景） #

如果你只是把DashboardCard当做UI容器组件在模板中调用，不需要复用它的实例逻辑，直接删除CompanyProfile中的继承声明即可：

// CompanyProfile的组件配置
export default {
  name: "CompanyProfile",
  // 删除extends: DashboardCard这一行即可
  components: { DashboardCard },
  // 其余原有配置保持不变
}

这个方案更符合Vue组件组合优先于继承的最佳实践，也能同时解决两个警告。

内容的提问来源于stack exchange，提问作者Abdullah Ch