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进行验证,确保传入的值符合我们期望的值。同时,在命名风格上也有很大的灵活性,可以通过配置实现不同风格的转换。

相关推荐
南雨北斗7 分钟前
Vue 3 修饰符(Modifiers)
前端
会豪8 分钟前
工业仿真(simulation)--前端(七)--消息栏
前端
Jinuss32 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海32 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手33 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪36 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪38 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__39 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工43 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主44 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端