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>

所以，這個驗證功能多的還是用作於開發，或者說寫的組件讓別的開發者使用是做的認證。（完全初學不太懂，如果有什么寫錯或者說這個驗證還有什么功能，請在評論寫下，先謝謝你了）