vue3中defineProps及使用方法详解_Javascript

vue3中defineprops详解

在vue 3中，defineprops是一个新的api，用于在子组件中定义并接收来自父组件的props。这是vue 3中组件数据传递方式的一种改进，使得props的声明和接收更加直观和明确。

使用方法

defineprops通常在<script setup>标签内使用，通过引入并调用defineprops函数来定义组件期望接收的props。每个prop都可以指定类型、默认值、是否必需等属性。

下面是一个简单的示例，展示了如何在vue 3组件中使用defineprops：

<script setup>
import { defineprops } from 'vue';
// 定义props
const props = defineprops({
  title: {
    type: string,
    required: true,
    default: 'default title'
  },
  count: {
    type: number,
    default: 0
  }
});
</script>
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>count: {{ count }}</p>
  </div>
</template>

在这个例子中，我们定义了两个props：title和count。title是一个必需的字符串类型prop，而count是一个可选的数字类型prop，带有默认值0。在模板中，我们可以直接使用这些props。

原理

defineprops的原理主要基于vue 3的响应式系统和组件系统。当你使用defineprops定义props时，vue会创建一个响应式的代理对象，该对象包含了所有定义的props。这个代理对象允许你在组件内部访问和响应props的变化。

在组件的渲染过程中，vue会收集模板中对props的依赖，并在props的值发生变化时重新计算并更新相关的dom。这是通过vue的响应式系统实现的，它能够在数据变化时自动触发组件的重新渲染。

此外，defineprops还提供了类型检查和验证的功能，确保传入的props符合组件的期望。如果传入的props不符合定义的类型或要求，vue会在开发模式下发出警告，帮助开发者发现和修复问题。

总结起来，defineprops在vue 3中提供了一种更加直观和明确的方式来定义和接收props，使得组件之间的数据传递更加清晰和可维护。同时，结合vue的响应式系统，它还能够确保组件在props变化时能够自动更新和重新渲染。

补充：

vue3中的defineprops方法

1.什么是defineprops

defineprops是vue3中的一种新的组件数据传递方式，可以用于在子组件中定义接收哪些父组件的props。当父组件的props发生变化时，子组件也会随之响应。

2.如何使用defineprops？

在子组件中可以使用defineprops声明该组件需要接收的props，它需要传递一个包含props字段的对象，每个字段表示该props的默认值和类型等信息，示例如下：

import { definecomponent, defineprops } from 'vue'
const childcomponent =<strong> definecomponent</strong>({
  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')