Vue : props 使用细节(父组件传递数据给子组件)

Vue.js Props详解

最新推荐文章于 2025-07-29 11:21:51 发布

weixin_34415923

最新推荐文章于 2025-07-29 11:21:51 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016309630

本文深入探讨Vue.js中Props的使用细节，包括基础类型检查、必填数据、默认值及自定义验证函数。通过实例展示了如何定义不同类型Props及其验证规则。

props使用细节

在Vue.js中我们可以使用 props 实现父组件传递数据给子组件，下面我们总结一下props的使用细节

1.基础类型检查
2.必填数据
3.默认值
4.自定义验证函数

其中每一项也有很多细节，具体看demo

Vue.component('my-component',{
    props:{
        // 基础的类型检查('null',匹配任何类型)
        propA：Number,
        // 多个可能的类型
        propB：[String,Number],
        // 必填的字符串
        propC:{
            type:String,
            required:true
        },
        //带有默认的数字
        propD:{
            type:Number,
            default:100
        },
        //带有默认值的对象
        propE:{
            type:Object,
            // 对象或数组且一定会从一个工厂函数返回默认值
            default:function(){
                return {message:'hello'}
            }
        },
        // 自定义验证函数
        propF:{
            validator:function(value){
                // 这个值必须匹配下列字符串中的一个
                return ['success','warning','danger'].indexOf(value) !==-1
            }
        }
    }
})