vue3 defineProps怎么用

Vue3的defineProps是用来定义组件的props的。它可以让我们在组件中声明props的类型、默认值、是否必填等信息，并且可以通过类型推断来增强代码的可读性和可维护性。

使用defineProps的步骤如下：

1. 在组件文件中导入defineProps函数：

import { defineProps } from 'vue'

2. 在组件中使用defineProps函数来定义props：

export default {
  props: defineProps({
    // props的类型和默认值
    name: {
      type: String,
      default: 'John Doe'
    },
    age: {
      type: Number,
      default: 18
    },
    // props的必填项
    email: {
      type: String,
      required: true
    }
  })
}

3. 在组件中使用props：

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <p>Email: {{ email }}</p>
  </div>
</template>

<script>
export default {
  props: defineProps({
    name: {
      type: String,
      default: 'John Doe'
    },
    age: {
      type: Number,
      default: 18
    },
    email: {
      type: String,
      required: true
    }
  })
}
</script>

需要注意的是，使用defineProps定义的props是只读的，我们无法在组件内部修改props的值。如果需要修改props的值，可以使用v-model或emit事件来通知父组件修改。