1.父組件再給子組件傳值的時候,子組件接收值,子組件會對接收的值進行一些規(guī)范約束,主要一下幾種方式:
<div id="app">
<child :content="{a:1}" :msg="123" val="hello world"></child>
</div>
<script>
Vue.component('child',{
props:{
content:Object,//規(guī)定必須是對象
msg:[String,Number],//規(guī)定必須是字符串或者數(shù)字
val:{
type:String,//規(guī)定類型必須是字符串
required:true,//規(guī)定必須傳這個屬性值,如果不傳就會報錯
default:'default value',//規(guī)定默認值,如果不傳值,就顯示default規(guī)定的值
validator:function(value){//自定義校驗器,這里規(guī)定傳入的值的長度大于5
return (value.length>5)
}
}
},
template:'<div>{{content}}+{{msg}}+{{val}}</div>'
})
var vm = new Vue({
el:"#app",
})
</script>
2.非prop特性
和props特別的主要區(qū)別是,props特性可以使用插值的形式獲取父組件傳遞的值,而非props不能,props特性在頁面渲染的時候不會顯示出來,非props特性是以屬性的方式顯示在渲染出來的html模板中