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

<code class="language-html"><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'  } });</code> 

而當這個變量為駝峰命名法如：（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中的橫杠會認為它是減號，導致辨認不出來。在定義事件的時候最好命名都為小寫，如

this.$emit("selectchange","data");

不要寫成

this.$emit("selectChange","data");

html同樣認不出來，比較好的方式是這種

this.$emit("select-change","data");

以上這篇vue props傳值失敗 輸出undefined的解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。