<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7.2.3数据验证</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<parent></parent>
</div>
<script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
/*props的几个示例:
Vue.component("my-component",{
props: {
//必须是数字类型
propA: Number,
//必须是字符串或数字类型
propB: [String,Number],
//布尔值，如果没有定义，默认值就是true
propC: {
type: Boolean,
default: true
},
//数字，而且是必传
propD: {
type: Number,
required: true
},
//如果是数组或对象，默认值必须是一个函数来返回
propE: {
type: Array,
default: function () {
return [];
}
},
propF: {
validator: function (value) {
return value > 10;
}
}
}
});*/
/*1.数字类型的验证
var childNode = {
template: "<div>{{ message }}</div>",
props: {
"message": Number,
}
};//创建子组件，设置好模板，props接收传过来的数据"message"必须是 Number 类型，能够接收的类型有 String，Number，Boolean，Function，Object，Array*/
//2.自定义验证函数
var childNode = {
template: `<div>数字类型：{{number}} , 数组类型：{{array}} , 布尔类型默认{{boolean}} , 字符串类型{{string}} , 自定义验证函数{{validator}},自定义验证函数内是value值大于10才不会报错,所以11正常输出</div>`,
props:{
'number': {
type: Number,
required: true,
},
'array': {
type: Array,
default: function () {
return [];
}
},
'boolean': {
type: Boolean,
default: true
},
'string': {
type: String,
required: true
},
'validator': {
validator: function(value){
return value > 10;
}
}
}
};
var parentNode = {
template: `<div class='parent'>
<child :number="number" :array="arrLists" :string="string" :validator="validator"></child>
</div>`,//创建好父组件的模板
components: {
"child": childNode
},//注册子组件到父组件上，因为父组件上用了子组件
data () {
return {
//message: "abc"//这里因为子组件规定了传入的 "message" 必须是数字类型，这里是字符串，所以控制台会报错
message: 123,//这样传入值才不会报错
arrLists: ['123123','123123'],
number: 123,
string: 'abc',
validator: 11
//message: '123'//这样传入依然会报错，因为此时的 "message" 是字符串类型。
}
},//定义父组件上的data，组件上的data必须是函数形式，用return返回值
}
var vm = new Vue({
el: "#app",
components: {
"parent": parentNode
}//注册父组件到根元素上
})
</script>
</body>
</html>
网友评论