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 不需要引入，可以直接使用。
三、最终效果。
