局部组件的简单使用
在局部组件的属性中可以设置校验器，对父组件传递过来的值进行验证，避免参数错误
由于子组件不能修改父组件传递过来的值，可以接受后，将该值变为自己的数据，然后使用这个数据即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js" charset="utf-8"></script>
</head>
<body>
<div id="app">
<my-component :a='1234'></my-component>
</div>
<script>
// 局部组件
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>',
props: {
// 属性名不能和data中的数据重复
// 属性的校验 出错只警告，不中断当前代码的执行
a: {
type: [String, Function, Object, Array, Number, Boolean],
// default:0, // 默认值
required: true, // 是否必须，与default 冲突
validator(val) { // 验证 函数 ，参数是传递的属性值,可以作校验器
console.log(val, typeof(val)) // 1234,Number
return val > 300 //成功返回true，失败返回false
}
}
}
})
new Vue({
el: '#app',
components: {
// 将myComponent组件注册到Vue实例下
'my-component': myComponent
}
});
</script>
</body>
</html>