Vue : 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
            }
        }
    }
})

来源：https://segmentfault.com/a/1190000016309630