vue props傳值失敗輸出undefined的解決方法

2019-11-19 12:58:35

字體：大中小

供稿：網(wǎng)友

如果在prop中傳的值為一個(gè)沒(méi)有使用特殊命名規(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>

而當(dāng)這個(gè)變量為駝峰命名法如：（selectName）,就會(huì)傳不過(guò)去：

<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標(biāo)簽改為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ū)分大小寫(xiě)（所有的都會(huì)轉(zhuǎn)換為小寫(xiě)），所以testName 在html表現(xiàn)為：test-name ，需要注意的是vue中使用props傳遞時(shí)最好不要用橫桿如select-name 的寫(xiě)法，因?yàn)槭褂玫臅r(shí)候this.select-name中的橫杠會(huì)認(rèn)為它是減號(hào)，導(dǎo)致辨認(rèn)不出來(lái)。在定義事件的時(shí)候最好命名都為小寫(xiě)，如