一杀餐、Vue 組件中命名
camelCase（駱?lè)迨剑┟?| kebab-case (短橫線) 命名
1?在組件中的html 姐仅，不能用駱?lè)迨降钟欤仨氂胟ebab-case（短橫線）命名疹尾，因?yàn)?strong>myMessage===mymessage
//html
<div id="app">
//報(bào)錯(cuò)：[Vue warn]: Unknown custom element: <mycomponent>
<myComponent></myComponent>
// 因?yàn)閔tml 中 是不區(qū)分大小寫(xiě)的 也就是 myComponent === mycomponent--
</div>
//js
Vue.component('myComponent',{//js中是區(qū)分大小寫(xiě)的
template: '<div>我是一個(gè)組件</div>'
})
...
2?在組件中昙篙，父組件給子組件傳遞數(shù)據(jù)必須用短橫線
//html
<div id="app"> //父組件給子組件傳遞數(shù)據(jù),必須用短橫線
<my-component my-msg="hello"></my-component>
</div>
3?在組件的template中和data中用this.xxx引用時(shí)秘豹，只能是駝峰式携御，如果用短橫線，會(huì)直接報(bào)錯(cuò)
//js
var app=new Vue({
el: '#app',
components:{
'my-component':{
props: ['myMsg'],
template:'<div>{{myMsg}}</div>',//在template中既绕，必須用駱?lè)迨? data:function(){
return{
title:this.myMsg ////在data中用this.xxx引用時(shí)因痛，必須用駱?lè)迨? }
}
}
}
})
4?在組件的props中隨意
//html
<div id="app"> //父組件給子組件傳遞數(shù)據(jù),必須用短橫線
<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中岸更，必須用駱?lè)迨? data:function(){
return{
title:this.myMsg
}
}
}
}
})
二鸵膏、六種驗(yàn)證的type類(lèi)型(可以有)
String | Number | Boolean | Object | Array | Function
Vue component(my-component,{
props: {
propA: Number,//必須是數(shù)字
propB: [String,Number],//必須字符串或是數(shù)字
propC: {//布爾值，如果沒(méi)定義怎炊，默認(rèn)值是 true
type: Boolean,
default: true
},
propD: {//數(shù)字而且必須傳
type: Number,
required: true // 必須傳
},
propE: {//如果是數(shù)組或?qū)ο筇菲螅J(rèn)值必須是一個(gè)函數(shù)來(lái)返回
type: Array,
default: function(){
return []
}
},
propF: {//自定義一個(gè)驗(yàn)證函數(shù)
validator: function(value){
return value > 10
}
}
}
})
【Demo實(shí)例 https://jsbin.com/zonohokihe/edit?html,output】
