defineProps 属性：用于接收父组件传递过来的数据。
注意：如果 defineProps 接收的参数名，和已有变量名相同，就会造成命名冲突。
语法格式：
// 无限制
const props = defineProps(['参数名', '参数名']);// 限制数据类型
const props = defineProps({参数名: String,参数名: Number,
});// 限制数据类型、默认值、必填项
const props = defineProps({参数名: { type: String, required: true },参数名: { type: Number, required: true },参数名: { type: String, default: "默认值" },
});
数组写法【无限制】：
一、父组件：通过自定义属性传递参数。
<template><h3>我是父组件</h3><hr /><!-- 通过自定义属性传递 name 和 age --><Child :name="info.name" :age="info.age"></Child>
</template><script setup>
// 引入组件
import Child from '../components/Child';
import { reactive } from 'vue';
let info = reactive({ name: "张三", age: 18 });
</script>
注：Vue 不允许使用 key、ref 等关键字作为属性名。
二、子组件：使用 defineProps 接收数据。
<template><h3>我是子組件</h3><p>{{ name }} : {{ age }}</p>
</template><script setup>
// 接收父组件传递的数据
const props = defineProps(['name', 'age']);
</script>
注：defineProps 不需要引入，可以直接使用。
三、最终效果。
原创作者：吴小糖
创作时间：2023.12.6
)
