1.什么是defineProps
defineProps是Vue3中的一种新的组件数据传递方式，可以用于在子组件中定义接收哪些父组件的props。当父组件的props发生变化时，子组件也会随之响应。
2.如何使用defineProps？
在子组件中可以使用defineProps声明该组件需要接收的props，它需要传递一个包含props字段的对象，每个字段表示该props的默认值和类型等信息，示例如下：
import { defineComponent, defineProps } from 'vue'
const ChildComponent = defineComponent({
props: defineProps({
message: {
type: String,
default: ''
},
count: {
type: Number,
default: 0
}
}),
template: `
<div>
<p>Message: {{ message }}</p>
<p>Count: {{ count }}</p>
</div>
`
})在父组件中，只需要通过props的方式向子组件传递对应的属性即可，如下：
<template>
<div>
<ChildComponent message="Hello, Vue3!" :count="10" />
</div>
</template>3.props类型
defineProps支持的主要类型有：
- String
- Number
- Boolean
- Object
- Array
- Function
同时也支持许多高级类型，比如，枚举类型，对象类型，联合类型等等。
import { defineProps } from 'vue'
const props = defineProps({
type:{
type: String,
validator: (value) => {
return ['success', 'warning', 'danger', 'info'].includes(value)
}
},
data:{
type: [Array, Object],
default: () => {
return { name: 'jack', age: 20 }
}
}
})4.props的验证
我们可以对props进行验证，确保传入的值符合我们期望的值。
- type：定义数据的类型
- required：是否必须
- default：默认值
- validator：自定义验证
import { defineProps } from 'vue'
const props = defineProps({
count: {
type: Number,
required: true,
default: 0,
validator: (value) => {
return value >= 0 && value <= 10
}
}
})5.props的命名风格
在Vue3中，props的命名风格默认采用驼峰命名风格(CamelCase)。但，如果组件props传入的命名是kebab-case风格时，我们可以通过配置globalProperties实现自动转换。
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$options = {
// 将组件的 props 的 kebab-case 转换为 camelCase
// 例如 `some-prop` 将被转换为 `someProp`.
convertProps: true
}
app.mount('#app')6.总结
defineProps方法是Vue3的一个新特性，在组件化开发时可以方便的定义props并进行类型检查，以确保数据流的正确性和可靠性，同时也可以对props进行验证，确保传入的值符合我们期望的值。同时，在命名风格上也有很大的灵活性，可以通过配置实现不同风格的转换。
