1.父组件再给子组件传值的时候,子组件接收值,子组件会对接收的值进行一些规范约束,主要一下几种方式:
<div id="app">
<child :content="{a:1}" :msg="123" val="hello world"></child>
</div>
<script>
Vue.component('child',{
props:{
content:Object,//规定必须是对象
msg:[String,Number],//规定必须是字符串或者数字
val:{
type:String,//规定类型必须是字符串
required:true,//规定必须传这个属性值,如果不传就会报错
default:'default value',//规定默认值,如果不传值,就显示default规定的值
validator:function(value){//自定义校验器,这里规定传入的值的长度大于5
return (value.length>5)
}
}
},
template:'<div>{{content}}+{{msg}}+{{val}}</div>'
})
var vm = new Vue({
el:"#app",
})
</script>
2.非prop特性
和props特别的主要区别是,props特性可以使用插值的形式获取父组件传递的值,而非props不能,props特性在页面渲染的时候不会显示出来,非props特性是以属性的方式显示在渲染出来的html模板中