vue3中defineProps

在 Vue 3 中，`defineProps` 是用来定义组件的 props（属性）的静态方法。它通常放在 Vue 的选项对象中，用于声明组件能够接收哪些外部传递的属性以及它们的数据类型。当父组件实例化子组件时，可以通过 props 对子组件进行数据绑定。

下面是一个简单的例子：

import { defineProps } from 'vue';

export default {
  name: 'ChildComponent',
  setup() {
    // 使用 defineProps 定义 props
    const props = defineProps<{
      message: string,
      age: number,
    }>(); // 返回一个包含所有props的对象

    return () => (
      <div>
        <p>Message: {props.message}</p>
        <p>Your age is: {props.age}</p>
      </div>
    );
  },
};

在这个例子中，`ChildComponent` 可以接收到两个 props：`message` 是字符串类型，`age` 是数字类型。在模板中，可以直接使用这些 prop 的值。