一、Vue 組件中命名

camelCase（駱?lè)迨剑┟?| kebab-case (短橫線) 命名

1?在組件中的html ，不能用駱?lè)迨?，必須用kebab-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ū)分大小寫的 也就是 myComponent === mycomponent--
</div>

//js
Vue.component('myComponent',{//js中是區(qū)分大小寫的
    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類型(可以有)

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ū)ο?，默認(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】