父组件给子组件传值
父组件给子组件传值需要通过属性传递,子组件通过props以数组的形式传递。
<body>
<div id="root">
<child :content="123"></child>
</div>
<script>
Vue.component('child',{
props:['content'],
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el: '#root',
})
</script>
</body>
那么，父组件传过来的值，如果想指定类型或者做限制怎么办？
<body>
<div id="root">
<child :content="123"></child>
</div>
<script>
Vue.component('child',{
props:{
content: String
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el: '#root',
})
</script>
</body>
如上所示，可以通过对象形式，将值指定为string。显然上例中123是数字（因为content前面加了冒号），就会报错。如果想指定为数字或字符串怎么办？
<body>
<div id="root">
<child :content="123"></child>
</div>
<script>
Vue.component('child',{
props:{
content: [String,Number]
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el: '#root',
})
</script>
</body>
还想更进一步的限制值怎么办？
<body>
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component('child',{
props:{
content: {
type:String,
// content不一定非要传值，true的话就一定要
required: false,
// 定义默认值,当content没值的时候会使用
default 'default value'
}
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el: '#root',
})
</script>
</body>
除了限制是否要传值，值类型和默认值以外，还能限制传值长度：
<body>
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component('child',{
props:{
content: {
type:String,
// required: false,
// // 定义默认值,当content没值的时候会使用
// default 'default value',
validator: function (value) {
return (value.length>5)
}
}
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el: '#root',
})
</script>
</body>
