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

6. 总结

defineProps 方法是 vue3 的一个新特性，在组件化开发时可以方便的定义 props 并进行类型检查，以确保数据流的正确性和可靠性，同时也可以对props进行验证，确保传入的值符合我们期望的值。同时，在命名风格上也有很大的灵活性，可以通过配置实现不同风格的转换。