VueJs組件prop驗證簡單理解

今天看了vuejs的組件，看到了prop組件，主要做用是在傳入數據的時候對傳入的值作判斷，寫了個小例子。

<div id="app">
        <my-child
            :num="100"
            :msg="'sdf'"
            :object="{a:'a'}"
            :cust="100"
        ></child>
    </div>
    <script type="text/javascript">
        Vue.component('my-child', {
            props: {
                // 基礎類型檢測 (`null` 意思是任何類型均可以)
                num: Number,
                // 多種類型
                propB: [String, Number],
                // 必傳且是字符串
                msg: {
                  type: String,
                  required: true
                },
                // 數字，有默認值
                num1: {
                  type: Number,
                  default: 1000
                },
                // 數組/對象的默認值應當由一個工廠函數返回
                object: {
                  type: Object,
                  default: function () {
                    return { message: 'hello' }
                  }
                },
                // 自定義驗證函數
                cust: {
                  validator: function (value) {
                    return value > 10
                  }
                }
            },
            template:  `<div>
                            <p>{{ num }}</p>
                            <p>{{ msg }}</p>
                            <p>{{ num1 }}</p>
                            <p>{{ object }}</p>
                            <p>{{ cust }}</p>
                        </div>`
        })
        new Vue({
            el: "#app"
        });
    </script>

輸出結果

這裏都是經過驗證了的，可以所有輸出來，並且控制檯沒有報錯。
若是有不符合的，控制檯會報錯。

<div id="app">
        <my-child
            :num="asd"
            :msg="sdf"
            :object="{a:'a'}"
            :cust="100"
        ></child>
    </div>

對應的，也沒有渲染出來

可是也有一些是報錯了可是渲染出來的。好比

<div id="app">
        <my-child
            :num="100"
            :msg="'sdf'"
            :object="{a:'a'}"
            :cust="1"
        ></child>
    </div>

因此，這個驗證功能多的仍是用做於開發，或者說寫的組件讓別的開發者使用是作的認證。（徹底初學不太懂，若是有什麼寫錯或者說這個驗證還有什麼功能，請在評論寫下，先謝謝你了）