Vue：組件參數校驗與非 props 特性

原創

2020-02-20 16:47

對props接收到的數據進行參數校驗

<div id="app">
			<child :content="123"></child>
		</div>
		<script>
			Vue.component('child',{
				props:{
					content: String
				},
				template: '<div>{{content}}</div>'
			})
			
			var app = new Vue({
				el:"#app",
			})
		</script>

這裏指定的數據類型爲String，所以控制檯會報錯
我們也能指定多個數據類型

Vue.component('child',{
				props:{
					content: [String, Number]
				},
				template: '<div>{{content}}</div>'
			})

此時如果我們傳入的數據類型爲對象的話，控制檯會報錯

<div id="app">
			<child :content="{a:1}"></child>
		</div>

在props中我們還能使用對象進行其他的校驗

props:{
					content: {
						//類型
						type: String,
						//傳入值不能爲空
						required: true,
						//默認值
						defalut: 'default value',
						//自定義參數校驗器
						validator: function(value){
							return (value.length > 5)
						}
					}
				},

什麼是props特性
上述代碼所使用的就是props特性，父組件傳值，子組件接受值，dom標籤內可以直接使用,如上述代碼父組件傳遞了content的值，子組件在props中定義接收content值，在div標籤中使用content值
props的三種類型
1.字符串 props：[‘content’]
2.數組 props:[‘content’,‘index’]
3.以對象形式列出的名稱：類型

props:{
name:String
age:number
}

什麼是非props特性
1.父組件定義了content值，子組件沒有接收

<div id="app">
			<child content="hello"></child>
		</div>
		<script>
			Vue.component('child',{
				template: '<div>{{content}}</div>'
			})
			
			var app = new Vue({
				el:"#app",
			})
		</script>

2.子組件模板內直接寫入內容而非插值表達式，會顯示在dom最外層標籤上

<div id="app">
			<child content="hello"></child>
		</div>
		<script>
			Vue.component('child',{
				template: '<div>Hello box</div>'
			})
			
			var app = new Vue({
				el:"#app",
			})
		</script>