Vue 父传子组件传参 defineProps

defineProps 属性：用于接收父组件传递过来的数据。

注意：如果 defineProps 接收的参数名，和已有变量名相同，就会造成命名冲突。

语法格式：

// 无限制
const props = defineProps(['参数名', '参数名']);

// 限制数据类型
const props = defineProps({
  参数名: String,
  参数名: Number,
});

// 限制数据类型、默认值、必填项
const props = defineProps({
  参数名: { type: String, required: true },
  参数名: { type: Number, required: true },
  参数名: { type: String, default: "默认值" },
});

数组写法【无限制】：

一、父组件：通过自定义属性传递参数。

注：Vue 不允许使用 key、ref 等关键字作为属性名。

二、子组件：使用 defineProps 接收数据。

注：defineProps 不需要引入，可以直接使用。

三、最终效果。

原创作者：吴小糖

创作时间：2023.12.6