vue3 props

props用了这么久了，才发现原来它既可以声明类型，又可以设置为必传，以前的工作中用的并不是很规范。
首先说一下命名方式，一共有两种，kebab-case和camelCase，前者跟HTML属性对齐，后者符合JS规范，是合法标识符，咋用都行。

• 普通声明：
  • 组合式API：
    import defineProps form 'vue'
const props = defineProps(['foo'])
  • 选项式API：
    props: ['foo']
• 带类型
  • 组合式API：
    defineProps({ foo: String })
  • 选项式API：
    props: { foo: String }
• 类型校验
  • 组合式API
    defineProps({ propA: [String, Number] }) // Stirng Number 两种类型
defineProps({ propA: { type: String, required: true } }) // 必传且类型为String
defineProps({ propA: { type: String, default: 'aaa' } }) // 类型为String， 默认值为'aaa'
defineProps({ propA: { validator: (value) => ['success', 'warning', 'danger'].includes(value) } }) // 校验自定义success warning danger三种类型
    props遵循单向绑定原则，props因父组件的更新而变化，新的变化会传递到子组件，但是子组件如果修改了父组件的状态，是不会逆向传递的，而且修改的时候vue会抛出警告。不过由于引用类型的数据是传地址而非传值，所以当prop为引用类型的时候，修改元素父元素是可以获取到更新后的内容的，不过这样很损耗性能，得不偿失，更推荐emit
    另一个比较特殊的是当实用一个对象去绑定多个prop时，可以使用没有参数的v-bind去绑定：
    const post = { propA: 'aaa', propB: 'bbb' }
<SonComponent v-bind="post" />
    等价于
    <SonComponent :propA="post.propA" :propB="post.propB" />
• 一些细节
  • 除了Boolean，其他的prop如果定义了但是没有赋值的话，默认是undefined，而Boolean是false
  • 有default的时候，默认是default的值，不是undefined或者false
  • 不设置required： true的话，默认是可以不传的