数据验证
2019-03-14 本文已影响0人
5吖
一、Vue 组件中命名
camelCase（骆峰式）命名 | kebab-case (短横线) 命名
1､在组件中的html ，不能用骆峰式，必须用kebab-case（短横线）命名，因为myMessage===mymessage
//html
<div id="app">
//报错：[Vue warn]: Unknown custom element: <mycomponent>
<myComponent></myComponent>
// 因为html 中 是不区分大小写的 也就是 myComponent === mycomponent--
</div>
//js
Vue.component('myComponent',{//js中是区分大小写的
template: '<div>我是一个组件</div>'
})
...
2､在组件中，父组件给子组件传递数据必须用短横线
//html
<div id="app"> //父组件给子组件传递数据,必须用短横线
<my-component my-msg="hello"></my-component>
</div>
3､在组件的template中和data中用this.xxx引用时，只能是驼峰式，如果用短横线，会直接报错
//js
var app=new Vue({
el: '#app',
components:{
'my-component':{
props: ['myMsg'],
template:'<div>{{myMsg}}</div>',//在template中，必须用骆峰式
data:function(){
return{
title:this.myMsg ////在data中用this.xxx引用时，必须用骆峰式
}
}
}
}
})
4､在组件的props中随意
//html
<div id="app"> //父组件给子组件传递数据,必须用短横线
<my-component my-msg="hello"></my-component>
</div>
//js
var app=new Vue({
el: '#app',
components:{
'my-component':{
props: ['myMsg'],//props随意，也就是 myMsg 或 my-msg 都可以的
template:'<div>{{title}}</div>',//在template中，必须用骆峰式
data:function(){
return{
title:this.myMsg
}
}
}
}
})
二、六种验证的type类型(可以有)
String | Number | Boolean | Object | Array | Function
Vue component(my-component,{
props: {
propA: Number,//必须是数字
propB: [String,Number],//必须字符串或是数字
propC: {//布尔值，如果没定义，默认值是 true
type: Boolean,
default: true
},
propD: {//数字而且必须传
type: Number,
required: true // 必须传
},
propE: {//如果是数组或对象，默认值必须是一个函数来返回
type: Array,
default: function(){
return []
}
},
propF: {//自定义一个验证函数
validator: function(value){
return value > 10
}
}
}
})
