如何解決vue props傳值失敗輸出undefined的問題

小編給大家分享一下如何解決vue props傳值失敗輸出undefined的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

如果在prop中傳的值為一個沒有使用特殊命名規(guī)則的變量如:（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'
 }
});

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

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

不要寫成

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

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

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

以上是“如何解決vue props傳值失敗輸出undefined的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！