Simple use of local components
The validator can be set in the properties of the local component to verify the value passed from the parent component to avoid parameter errors
Since the child component cannot modify the value passed by the parent component, after accepting it, change the value into its own data, and then use this data.
<!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>