defineProps

本文详细介绍了在Vue中如何通过`defineProps`方法声明和管理父组件传递给子组件的props,包括变量命名、类型设定(如String,Number,Array,Object)、默认值以及必填项的要求。
摘要由CSDN通过智能技术生成

1、直接声明父组件传递的变量名

使用数组式声明,用字符串类型包裹每一个变量名

defineProps(['data','meta])

2、可规定父组件传递的类型/默认值/必填

  • type规定传递的类型

    • 直写js中的数据类型

    • 可以为数组[String,Number],表示传递数组中的类型即可

  • default设置默认值

    • 不传值时进行显示

    • 基本数据类型可以直接写默认值

    • 复杂数据类型(数组/对象)需要工厂函数即用函数

      • 对象工厂函数使用箭头函数时:default:()=>({}),区别于函数()=>{}

  • required表示必传项

    • 如果不传,控制台会报warn

//required 必填
defineProps(
    {
        data:{
            required:true
        }
    }
)

//type基本数据类型,有默认值
defineProps(
    {
        data:{
            type:String,
            default:'123'
        }
    }
)

//type 复杂数据类型,有默认值
defineProps(
    {
        data:{
            type:Array,
            default(){
                return []
            }
        }
    }
)

//type复杂数据类型数组,有默认值,使用箭头函数
defineProps(
    {
        data:{
            type:Array,
            default:()=>[]
        }
    }

)

//type复杂数据类型对象,有默认值,使用箭头函数
defineProps(
    {
        data:{
            type:Array,
            default:()=>({})
        }
    }
)



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值