React和Vue 如何限制组件传值数据类型及设置默认值

react 使用class类的静态方法为子组件添加静态属性 propTypes 和 defaultProps

Vue 相对方便简洁一点 直接在子组件的props上接收值时设置类型限制和默认值

// react 
import { Components } from 'react' // 引入react的`Components`类
import PropsType from 'props-type' // 引入类型限制

export class child extends Components {
  // 设置子组件接收数据类型限制
  static propTypes = {
    name: PropsType.string.isRequired, // 一个必传的字符串
    age: PropsType.number, // 非必传的数字
    vulgarTycoon: PropsType.boolean // 非必传的布尔值
  }
  // 设置默认值
  static defaultProps = {
   name: '思聪',
   age: 38,
   vulgarTycoon: true
  }
} 

// Vue
// 在子组件的props内操作
{
 props: {
  name: {
   type: String || [String, Number] // 类型 //(`null` 和 `undefined` 会通过任何类型验证)
   default: '思聪' || () => '思聪', // 默认值
   required: false // 是否必传 默认为 false
  }
 }
}