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