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