如果在prop中傳的值為一個沒有使用特殊命名規則的變數如:（type），可以順利傳值:

<div id="app">
<test :type="type"></test>
</div>
Vue.component("test", {
        props: ['type'],
        template: '<div @click="a">我是按鈕{{type}}</div>',
        methods: {
            a() {
                console.log(this.type);
            }
        }
    });
var app = new Vue({
  el: '#app',
  data: {
    type: 'test'
  }
});

而當這個變數為駝峰命名法如：（selectName）,就會傳不過去:

<div id="app">
<test :selectName="selectName"></test>
</div>
Vue.component("test", {
        props: ['selectName'],
        template: '<div @click="a">我是按鈕{{selectName}}</div>',
        methods: {
            a() {
                console.log(this.selectName);
            }
        }
    });
var app = new Vue({
  el: '#app',
  data: {
    selectName: 'test'
  }
});
 

解決方法是把selectName標籤改為select-Name：

<div id="app">
<test :select-Name="selectName"></test>
</div>
Vue.component("test", {
        props: ['selectName'],
        template: '<div @click="a">我是按鈕{{selectName}}</div>',
        methods: {
            a() {
                console.log(this.selectName);
            }
        }
    });
var app = new Vue({
  el: '#app',
  data: {
    selectName: 'test'
  }
});
 

總結：如果為駝峰命名法傳遞的話，html不區分大小寫（所有的都會轉換為小寫），所以testName 在html表現為 ：test-name ，需要注意的是vue中使用props傳遞時最好不要用橫杆如select-name 的寫法，因為使用的時候this.select-name中的橫槓會認為它是減號，導致辨認不出來。在定義事件的時候最好命名都為小寫，如