vue父组件多处引用同一子组件传参问题

Question

vue父组件中多处引用子组件，但传递给子组件的参数不同，如图：

我现在的做法是在子组件的props中将每个变量都声明

但感觉这不是最优的写法，有没有在props中只声明一个变量，然后能够判断是父组件传过来的是哪个参数的写法

Answer 1

export default {
    props: {
        value: Number
    }
}

统一变量名，控制变量类型。对于Ring-bar组件来说，只要给到合适的值就能渲染，而不关心具体业务（如是correctNum还是recentlyCorrectRate）

Answer 2

props:{
  key1:{
      required:false
  },
  key2:{
      required:false
  }
}

设置为非必需之后，子组件就不再强制接收这样一个参数。
如果你设置不同的属性是为了不同的渲染，那么没有必要合并成一个，分开写应该更清晰一点。如果非要合在一起，可以先接收，再去判断完再渲染。

Answer 3

一楼的方法就可以了。。。