Vue3 defineProps的使用

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')