Vue3属性值传递defineProps

        在自定义组件时，通常需要接收组件上的属性值，在Vue3中可以使用defineProps()函数来定义接收的属性值

一、简单定义

将要接收的属性值定义在数组中，传递给defineProps函数即可，函数的返回值为封装这些属性值的一个对象

const props = defineProps(['name','age'])

props接收的对象实际上长这样

{
    name: '属性值',
    age: '属性值'
}

二、对象定义

① 只约束属性的数据类型

    约束一种数据类型直接写，约束多种数据类型用数组包裹

const props = defineProps({
        name: String,               //  必须是String
        info: [String, Object],     //  类型可以是String或Object
 })

② 约束更多信息

• type：属性的数据类型，可以用数组指定多个
• default：属性的默认值，数组或对象类型默认值要从函数中返回
• required：设置属性值是否必须传递（true为必须传递，false为非必须）

const props = defineProps({
        name: {
            type: String,
            default: '匿名',  
        },
        info: {
            type: String,
            required: true,
        },
        friends: {
            type: Array,
            //  数组类型默认值必须通过函数返回，参数props中会接收传递来的所有属性值
            default(props) {
                return {}
            }
        },
        other: {
            type: Object,   
            //  对象类型默认值要在函数中返回，参数props中会接收传递来的所有属性值
            default(props){
                return {}
            }
        }
    })