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: ,
            // 对象或数组且一定会从一个工厂函数返回默认值
            default:function(){
                return {message:\'hello\'}
            }
        },
        // 自定义验证函数
        propF:{
            validator:function(value){
                // 这个值必须匹配下列字符串中的一个
                return [\'success\',\'warning\',\'danger\'].indexOf(value) !==-1
            }
        }
    }
})

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