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进行验证,确保传入的值符合我们期望的值。同时,在命名风格上也有很大的灵活性,可以通过配置实现不同风格的转换。
参考---https://www.python100.com/html/YX519T8WHX57.html
参考---https://pythonjishu.com/kpcskqehplrtklq/
标签:vue,方法,Vue3,props,组件,import,type,defineProps From: https://www.cnblogs.com/pwindy/p/17620263.html