vue3 组合函数中 使用 defineProps

在Vue3的组合函数中，使用defineProps可以定义子组件接收的props参数。defineProps有多种使用方法，如下所示：
1. 方法1：

   const props = defineProps(["width", "height"]);

这种方法通过数组传递props参数的名称，可以直接从父组件中接收相应的值。

2. 方法2：

   const props = defineProps({
     width: { type: String, default: "100px" },
     height: { type: String, default: "" }
   });

这种方法通过对象传递props参数的详细定义，可以指定参数的类型和默认值。

3. 方法3：

   interface Props {
     width: string;
     height: string;
   }
   const props = defineProps<Props>();

这种方法使用TypeScript的接口定义props参数的类型，可以更加明确地指定参数的类型。

4. 方法4：

   const props = withDefaults(
     defineProps<{ width?: string; height?: string }>(),
     {
       width: '100px' // 默认值，可不写
     }
   );

这种方法结合了defineProps和withDefaults，可以在定义props时指定默认值，减少重复代码。

通过使用defineProps，我们可以在组合函数中定义和接收父组件传递的props参数，方便组件间的通信。