vue3中defineProps如何使用

在 Vue 3 中，可以通过 `defineProps` 来定义组件中的 props 属性。下面是 `defineProps` 的使用方法：

1. 在组件的 `setup` 函数中使用 `defineProps` 定义 props：

import { defineComponent, defineProps } from 'vue';

export default defineComponent({
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 使用 defineProps 定义 props
    const propsData = defineProps({
      count: {
        type: Number,
        default: 0
      }
    });

    return {
      props,
      propsData
    };
  }
});

2. `defineProps` 的参数是一个对象，每个属性都是一个 prop，包含 prop 的类型、默认值等信息。

3. 在组件中使用 `props` 和 `propsData` 对象来访问 props 属性：

<template>
  <div>
    <p>{{ props.msg }}</p>
    <p>{{ propsData.count }}</p>
  </div>
</template>

注意：在 Vue 3 中，组件的 props 不再是响应式的，如果需要响应式的 props，可以使用 `reactive` 函数来包装 props 对象。